actionscript-3 - as3放大图片

Question

我想创建一个图像放大应用程序，如下所示： 一个蒙版的小窗口显示大图像区域，对应于小图像上的鼠标 X 和 Y。网上有很多放大图像应用示例，例如：

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

但是在这里，鼠标和蒙版以相同的 X 和 Y 移动。我想要的是蒙版窗口仅在小图像上显示与鼠标 X 和 Y 相对应的特定区域。

任何帮助将不胜感激。谢谢。

Answer 1

去年我写了一个食谱，正是你要找的。我不保证它会尽可能地重构或高效，但它工作得非常好。随心所欲地改变它。我发布了代码，供任何人自由使用。

但是，未经事先请求，我不允许任何人使用照片和放大镜资产，请。

该类允许您更改自己的放大倍率，即使在运行时也可以。您可以使用自己的放大镜图形，但源文件中也包含一个（如果您想在项目中使用它，请先询问我）。

描述：

放大镜：为图像资产创建可自定义的放大镜

以下代码演示了使用 Magnifier 类为图像资产创建可自定义放大镜的解决方案。

放大镜构造函数接收 6 个参数。第一个 loupeDisplayObject:DisplayObject 必需参数是对用作虚拟放大镜的显示对象的引用。为了使该类正常工作，loupeDisplayObject:DisplayObject 必须在其中心包含圆形或椭圆形的空隙或 alpha 透明度。

第二个 imageURL:String 必需参数为 URLLoader 的加载函数的 URLRequest 提供目标图像资产的 URL。该图像为 thumbSprite:Sprite 和 magnificationSprite:Sprite 对象提供 BitmapData，它们使用第三个 thumbScale:Number 和第四个 magnificationScale:Number 可选参数进行缩放。thumbSprite:Sprite 的比例显示在舞台上，而 magnificationSprite:Sprite 的比例在放大期间可见。

放大镜类通过使用鼠标事件来切换虚拟放大镜在图像资产上的可见性。一个 maskSprite:Sprite 椭圆，在下面被索引并且基于 loupeDisplayObject:DisplayObject 的大小，被创建来掩盖 magnificationSprite:Sprite。但是，可以设置第五个 maskWidth:Number 和第六个 maskHeight:Number 可选参数来手动调整 maskSprite:Sprite 的大小，这更适合具有复杂形状的 loupeDisplayObject:DisplayObject。

在取消之前调用放大镜实例的公共 deallocate() 函数会将其标记为可用于垃圾收集。

类文件：

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);
        }
    }
}