As3放大图像

Question

我想创建一个图像放大应用程序，如下所示： 小图像上与鼠标X和Y对应的蒙版小窗口showig大图像区域。还有很多放大图像应用exaples在线比如：

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

但这里有相同的X和Y鼠标移动面膜我想是对应鼠标的X和Y蒙面窗口只显示某一地区在小图像上。

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

Answer 1

我写了一个配方去年正是你要寻找的。我不保证这是重构或高效的，但它可以很好地工作。尽可能地改变它。我发布代码听取任何人免费使用。

但是，照片和放大镜资产我不允许任何人在没有事先要求的情况下使用。

类可以让您改变自己的放大率的实力，即使在运行时，如果你想要的。您可以使用自己的放大镜图形，但一个也包含在源文件（请先问我，如果你想在你的项目中使用它），它可以在这里下载：http://www.megaupload.com/?d=ANH0PLLR

说明：

放大镜：创建定制 放大镜用于图像资产

下面的代码说明用于创建定制的 放大镜使用 放大镜类图像资产 溶液。

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

第二IMAGEURL：字符串所需 参数与 URL的目标图像资产的供给的URLLoader的 负载函数的的URLRequest。所述 图像提供的BitmapData两个 thumbSprite：雪碧和 magnificationSprite：Sprite对象， ，其使用的是第三 thumbScale缩放：数量和第四 magnificationScale：编号可选 参数。 thumbSprite：精灵在 阶段展出，而放大精灵 。在放大过程中，精灵可见 。

放大镜类操作 采用鼠标事件来切换 图像资产上的虚拟放大镜的 可见性。一个maskSprite：Sprite 椭圆，下面两个索引和基于 的尺寸为 loupeDisplayObject：DisplayObject，为 创建的掩码为 magnificationSprite：Sprite。然而， 第五maskWidth：数量和第六 maskHeight：编号可选参数 可以手动设置尺寸的 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); 
     } 
    } 
} 

Answer 2

从Google上的前几名搜索“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