Question

我想创建一个像下面这样的图像放大应用程序：掩盖的小窗口showig大图像区域对应于小图像上的鼠标X和Y.在线有许多放大图像应用程序，例如：

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

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

任何帮助都将受到高度赞赏。感谢。

Answer 1

去年我写了一篇关于你正在寻找什么的食谱。我不保证它是重构的或有效的，但它确实很好。尽可能多地改变它。我发布代码听取任何人自由使用。

但是，请不要事先要求我使用照片和放大镜资产。

enter image description here

该类允许您改变自己的放大强度，即使在运行时也可以。您可以使用自己的放大镜图形，但源文件中也包含一个（请先询问我是否要在项目中使用它），可在此处下载：http://www.megaupload.com/?d=ANH0PLLR

说明

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

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

放大镜构造函数接收6   参数。首先   loupeDisplayObject：的DisplayObject   required参数是对a的引用   显示对象，用作   虚拟放大镜。为了上课   为了正常运作，   loupeDisplayObject：DisplayObject必须   包含圆形或椭圆形   形状空洞或α透明度   它的中心。

第二个imageURL：需要字符串   参数提供URLLoader的   用函数加载函数的URLRequest   目标图像资产的URL。该   image为两者提供了BitmapData   thumbSprite：Sprite和   magnificationSprite：Sprite对象，   使用第三个缩放   thumbScale：数字和第四个   magnificationScale：数字可选   参数。规模   thumbSprite：Sprite展出   阶段，而规模   magnificationSprite：Sprite是可见的   放大期间。

放大镜类的运作方式   使用鼠标事件来切换   虚拟放大镜的可见度   图像资产。一个maskSprite：Sprite   椭圆，索引在下面和基于   关于的大小   loupeDisplayObject：DisplayObject，是   创建来掩盖   magnificationSprite：雪碧。然而，   第五个maskWidth：Number和第六个   maskHeight：Number可选参数   可以设置为手动调整大小a   maskSprite：更多的精灵   适合a   loupeDisplayObject：DisplayObject with   形状复杂。

调用public deallocate（）   放大镜实例的功能   在无效之前将标记   它可用于垃圾   集合。

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

Answer 2

从谷歌的前几个搜索“as3放大镜教程”。您可以轻松修改他们的行为方式。

http://www.webwasp.co.uk/tutorials/b11-magnify/index.php

http://www.flashkit.com/tutorials/Special_Effects/Real_Tim-Boban_Kl-144/index.php

http://learnflashwithme.blogspot.com/2009/09/create-magnifying-glass-effect-in.html

As3放大图像

2 个答案: