As3 magnify image

Question

I want to create a image magnify application like following: A masked small window showig big image area corresponding to the mouse X and Y on the small image. There are many magnifying image application exaples online such as:

http://www.flashandmath.com/intermediate/magglass/mag_glass.html

But here the mouse and mask moves with same X and Y. What i want is that masked window display only certain area corresponding to mouse X and Y on Small image.

Any help would be highly appreciated. thanks.

Answer 1

i wrote a recipe last year for exactly what you're looking for. i do not guarantee that's it's as refactored or efficient as it could be, but it works really well. change it up as much as you like. i post the code hear for anyone to freely use.

however, the photograph and loupe asset i do not permit anyone to use without prior request, please.

the class lets you alter your own magnification strength, even at runtime if you want. you can use your own loupe graphic, but one is also included in the source files (please ask me first if you want to use it in your project).

Description:

Magnifier: Creating A Customizable Magnifier For Image Assets

The following code demonstrates the solution for creating a customizable magnifier for image assets using the Magnifier class.

The Magnifier constructor receives 6 parameters. The first loupeDisplayObject:DisplayObject required parameter is a reference to a display object that is used as the virtual loupe. In order for the class to function properly, the loupeDisplayObject:DisplayObject must contain a circular or elliptically shaped void or alpha transparency at its center.

The second imageURL:String required parameter supplies the URLLoader’s load function’s URLRequest with the URL of the target image asset. The image provides BitmapData for both thumbSprite:Sprite and magnificationSprite:Sprite objects, which are scaled using the third thumbScale:Number and fourth magnificationScale:Number optional parameters. The scale of the thumbSprite:Sprite is exhibited on stage, while the scale of the magnificationSprite:Sprite is visible during magnification.

The Magnifier class operates by employing mouse events to toggle the visibility of a virtual loupe over an image asset. A maskSprite:Sprite ellipse, both indexed below and based on the size of the loupeDisplayObject:DisplayObject, is created to mask the magnificationSprite:Sprite. However, the fifth maskWidth:Number and sixth maskHeight:Number optional parameters can be set to manually size a maskSprite:Sprite that is more suitable for a loupeDisplayObject:DisplayObject with a complex shape.

Calling the public deallocate() function of the Magnifier instance prior to its nullification will mark it as being available for garbage collection.

Class FIle:

package
{
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.geom.Matrix;
import flash.net.URLRequest;
import flash.ui.Mouse;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Regular;

public class Magnifier extends Sprite
    {
    //Class Variables
    private var loupeDisplayObject:DisplayObject;
    private var imageWidth:Number;
    private var imageHeight:Number;
    private var thumbScale:Number;
    private var magnificationScale:Number;
    private var maskWidth:Number;
    private var maskHeight:Number;
    private var imageBitmapData:BitmapData;
    private var maskSprite:Sprite;
    private var magnificationSprite:Sprite;
    private var thumbSprite:Sprite;
    private var loupeTween:Tween;
    private var magnificationTween:Tween;

    //Constructor
    public function Magnifier   (
                                loupeDisplayObject:DisplayObject,
                                imageURL:String,
                                thumbScale:Number = 0.5,
                                magnificationScale:Number = 1.0,
                                maskWidth:Number = NaN,
                                maskHeight:Number = NaN
                                )
        {
        this.loupeDisplayObject = loupeDisplayObject;
        this.thumbScale = Math.max(0.1, Math.min(thumbScale, 1.0));
        this.magnificationScale = Math.max(0.1, magnificationScale);
        this.maskWidth = maskWidth;
        this.maskHeight = maskHeight;

        init(imageURL);
        }

    //Load And Handle Image
    private function init(imageURL:String):void
        {
        var imageLoader:Loader = new Loader();
        imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageHandler);
        imageLoader.load(new URLRequest(imageURL));
        }

    private function errorHandler(evt:IOErrorEvent):void
        {
        throw(evt.text);
        }

    private function imageHandler(evt:Event):void
        {
        evt.target.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);
        evt.target.removeEventListener(Event.COMPLETE, imageHandler);

        imageWidth = evt.target.content.width;
        imageHeight = evt.target.content.height;

        imageBitmapData = new BitmapData(imageWidth, imageHeight);
        imageBitmapData.draw(evt.target.content);

        createComponents();
        }

    //Create Components
    private function createComponents():void
        {
        //Loupe Visibility
        loupeDisplayObject.alpha = 0;

        //Mask
        if (isNaN(maskWidth)) maskWidth = loupeDisplayObject.width;
        if (isNaN(maskHeight)) maskHeight = loupeDisplayObject.height;

        maskSprite = new Sprite();
        maskSprite.graphics.beginFill(0x00FF00, 0.5);
        maskSprite.graphics.drawEllipse(0, 0, maskWidth, maskHeight);
        maskSprite.graphics.endFill();
        maskSprite.mouseEnabled = false;

        //Magnification
        magnificationSprite = scaleImage(new Matrix(magnificationScale, 0, 0, magnificationScale));
        magnificationSprite.mouseEnabled = false;
        magnificationSprite.alpha = 0;
        magnificationSprite.mask = maskSprite;

        //Thumb
        thumbSprite = scaleImage(new Matrix(thumbScale, 0, 0, thumbScale));
        thumbSprite.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

        //Add Components To The Display List
        addChild(thumbSprite);
        addChild(magnificationSprite);
        addChild(maskSprite);
        addChild(loupeDisplayObject);
        }

    private function scaleImage(matrix:Matrix):Sprite
        {
        var scaledResult:Sprite = new Sprite();
        scaledResult.graphics.beginBitmapFill(imageBitmapData, matrix, false, true);
        scaledResult.graphics.drawRect(0, 0, imageWidth * matrix.a, imageHeight * matrix.d);
        scaledResult.graphics.endFill();

        return scaledResult;
        }

    //Mouse Event Handlers
    private function mouseDownHandler(evt:MouseEvent):void
        {
        thumbSprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
        thumbSprite.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
        stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

        mouseMoveHandler(evt);
        setLoupeAsVisible(true);
        }

    private function mouseMoveHandler(evt:MouseEvent):void
        {
        loupeDisplayObject.x = evt.localX - loupeDisplayObject.width / 2;
        loupeDisplayObject.y = evt.localY - loupeDisplayObject.height / 2;

        maskSprite.x = evt.localX - maskSprite.width / 2;
        maskSprite.y = evt.localY - maskSprite.height / 2;

        magnificationSprite.x = 0 - evt.localX / thumbSprite.width * (magnificationSprite.width - thumbSprite.width);
        magnificationSprite.y = 0 - evt.localY / thumbSprite.height * (magnificationSprite.height - thumbSprite.height);
        }

    private function mouseOutHandler(evt:MouseEvent):void
        {
        thumbSprite.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
        setLoupeAsVisible(false);
        }

    private function mouseOverHandler(evt:MouseEvent):void
        {
        thumbSprite.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
        setLoupeAsVisible(true);
        }

    private function mouseUpHandler(evt:MouseEvent):void
        {
        if (thumbSprite.hasEventListener(MouseEvent.MOUSE_OVER)) thumbSprite.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

        thumbSprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
        thumbSprite.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
        stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

        setLoupeAsVisible(false);
        }

    //Loupe Tween And Visibility
    private function setLoupeAsVisible(response:Boolean):void
        {
        var targetAlpha:Number;

        if  (response)
            {
            targetAlpha = 1.0;
            Mouse.hide();
            }
            else
            {
            targetAlpha = 0.0;
            Mouse.show();
            }       

        loupeTween = new Tween(loupeDisplayObject, "alpha", Regular.easeIn, loupeDisplayObject.alpha, targetAlpha, 0.25, true);
        magnificationTween = new Tween(magnificationSprite, "alpha", Regular.easeIn, magnificationSprite.alpha, targetAlpha, 0.25, true);
        }

    //Clean Up
    public function deallocate():void
        {
        thumbSprite.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
        }
    }
}