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