As3 放大图像

Question

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

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

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

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

Answer 1

我去年写了一份食谱，正是你想要的。我不保证它会尽可能地重构或高效，但它确实运作良好。只要你喜欢，就可以改变它。我将代码发布给任何人免费使用。

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

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

描述：

放大镜：创建可定制的
图像资产放大镜

下面的代码演示了
用于创建可定制的解决方案
使用图像资产的放大镜
放大镜类。

放大镜构造函数接收 6
参数。第一个
放大镜显示对象:显示对象
所需参数是对
用作的显示对象
虚拟放大镜。为了上课
为了正常运作，
loupeDisplayObject:DisplayObject 必须
包含圆形或椭圆形
形状空隙或 alpha 透明度
它的中心。

第二个imageURL：必填字符串
参数提供 URLLoader 的
加载函数的 URLRequest
目标图像资源的 URL。这
image 为两者提供 BitmapData
拇指精灵：精灵和
magnificationSprite:Sprite对象，
使用第三个缩放
拇指刻度：数字和第四
magnificationScale:数字可选
参数。规模
thumbSprite:Sprite 展示于
阶段，而规模
magnificationSprite: 精灵可见
放大期间。

放大镜类的操作方式是
使用鼠标事件来切换
虚拟放大镜的可视性
图像资产。掩码Sprite:Sprite
椭圆形，均在下方索引并基于
的大小
loupeDisplayObject:DisplayObject，是
创建来掩盖
放大倍率Sprite：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);
        }
    }
}