[flexcoders] Re: magnifying glass component

[wjacker2]

I wrote a sample magnifying glass example, Hope this can help you.

main code:
//Magnifying_glass.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" xmlns:local="*">
     <local:MagnifyingGlassImage
source="testImage.gif"showMagnifyBitmap="true"
verticalAlign="middle"horizontalAlign="center"/>
</mx:Application>

//MagnifyingGlassImage.as
package
{
     import flash.display.Bitmap;
     import flash.display.BitmapData;
     import flash.display.Loader;
     import flash.events.Event;
     import flash.events.MouseEvent;
     import flash.geom.Matrix;
     import flash.geom.Point;
     import flash.geom.Rectangle;

     import mx.controls.Image;
     import mx.core.mx_internal;

     use namespace mx_internal;

     public class MagnifyingGlassImage extends Image
     {
         public var magnifierWidth : Number = 250;
         public var magnifierHeight : Number = 150;
         public var magnifyModulus : Number = 1.4;
         public var magnifyBorderColor : uint = 0xFFFF0000;
         public var showMagnifyBitmap : Boolean = true;

         private var tempBitData : BitmapData;
         private var magnifyBitmapData:BitmapData = new
BitmapData(magnifierWidth, magnifierHeight);
         private var magnifyBitmap : Bitmap = new
Bitmap(magnifyBitmapData);

         public function MagnifyingGlassImage()
         {
             super();
         }

         private function showMagnifyImage(e : MouseEvent) : void
         {
             if(showMagnifyBitmap)
             {
                 magnifyBitmap.visible = true;
                 this.addEventListener(MouseEvent.MOUSE_OVER,
showMagnifyImage);
                 this.addEventListener(MouseEvent.MOUSE_OUT,
hiddenMagnifyImage);
                 this.addEventListener(MouseEvent.MOUSE_MOVE,
magnifyImage);
                 this.dispatchEvent(new
MouseEvent(MouseEvent.MOUSE_MOVE));
             }
         }

         private function hiddenMagnifyImage(e : MouseEvent) : void
         {
             this.removeEventListener(MouseEvent.MOUSE_OVER,
showMagnifyImage);
             this.removeEventListener(MouseEvent.MOUSE_OUT,
hiddenMagnifyImage);
             this.removeEventListener(MouseEvent.MOUSE_MOVE,
magnifyImage);
             magnifyBitmap.visible = false;
         }

         private function magnifyImage(e : MouseEvent) : void
         {
             var cutBitmapData : BitmapData = new
BitmapData(magnifierWidth,magnifierHeight);

              cutBitmapData.copyPixels(tempBitData,new Rectangle(
                     Math.min(Math.max(mouseX - (this.width -
this.contentWidth)/2 - magnifierWidth/(2 * magnifyModulus), 0),
                         this.contentWidth -
magnifierWidth/magnifyModulus),
                     Math.min(Math.max(mouseY - (this.height -
this.contentHeight)/2 - magnifierHeight/(2 * magnifyModulus), 0),
                         this.contentHeight -
magnifierHeight/magnifyModulus),
                     magnifierWidth/magnifyModulus,
magnifierHeight/magnifyModulus),
                 new Point(0,0));

             var m:Matrix = new Matrix();
             m.scale(magnifyModulus, magnifyModulus);

             magnifyBitmapData = new BitmapData(magnifierWidth,
magnifierHeight);
             magnifyBitmapData.draw(cutBitmapData, m, null, null,
null,true);
             fillBitmapBorder();
             magnifyBitmap.bitmapData = magnifyBitmapData;

             magnifyBitmap.x = Math.min(Math.max(mouseX - (this.width
-this.contentWidth + magnifierWidth)/2, 0), this.contentWidth
-magnifierWidth) + (this.width - this.contentWidth)/2;
             magnifyBitmap.y = Math.min(Math.max(mouseY - (this.height
-this.contentHeight + magnifierHeight)/2, 0),this.contentHeight
-magnifierHeight) + (this.height - this.contentHeight)/2;
         }

         private function fillBitmapBorder() : void
         {
             magnifyBitmapData.fillRect(new Rectangle(0,0,magnifierWidth
,1),magnifyBorderColor);
             magnifyBitmapData.fillRect(new Rectangle(0,magnifierHeight -
1,magnifierWidth ,1),magnifyBorderColor);
             magnifyBitmapData.fillRect(new
Rectangle(0,0,1,magnifierWidth),magnifyBorderColor);
             magnifyBitmapData.fillRect(new Rectangle(magnifierWidth -
1,0,1,magnifierWidth),magnifyBorderColor);
         }

         override mx_internal function
contentLoaderInfo_completeEventHandler(event:Event):void
         {
             super.contentLoaderInfo_completeEventHandler(event);
             this.addChild(magnifyBitmap);
             magnifyBitmap.visible = false;
            
this.addEventListener(MouseEvent.MOUSE_DOWN,showMagnifyImage);
            
this.addEventListener(MouseEvent.MOUSE_UP,hiddenMagnifyImage);
         }

         override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
         {
             super.updateDisplayList(unscaledWidth, unscaledHeight);
             if (contentHolder)
             {
                 if (contentHolder is Bitmap)
                 {
                     tempBitData =
Bitmap(contentHolder).bitmapData.clone();
                 }
                 else if (contentHolder is Loader)
                 {
                     try
                     {
                         if (Loader(contentHolder).content is Bitmap)
                         {
                             tempBitData =
Bitmap(Loader(contentHolder).content).bitmapData.clone();
                         }
                     }
                     catch(error:Error)
                     {
                     }
                 }
             }
         }

     }
}


--- In flexcoders@yahoogroups.com, "Ben Marchbanks" <[EMAIL PROTECTED]> wrote:
>
> Anybody know if there is a flex magnifier/zoom component available ?
>
> I am looking to produce a magnifying glass effect similar to this
> flash version
>
> http://www.usflashmap.com/component/flash_magnifying_glass.htm
>