0 Replies Latest reply on Feb 23, 2014 12:41 PM by AVeu

    Problem with DisplacementMapFilter - I need cool magnifying glass efect

    AVeu

      Hi,

      I would like to create spark Image extension, which will display image as here: http://www.intruz.com/show/all/athletic

      I found out that DisplacementMapFilter could be used for that. I created such a class:

      package 
      {
                import flash.display.BitmapData;
                import flash.events.MouseEvent;
                import flash.filters.DisplacementMapFilter;
                import flash.filters.DisplacementMapFilterMode;
                import flash.geom.Point;
      
                import spark.components.Image;
      
                public class ZoomableImage extends Image
                {
                          protected var dFilter:DisplacementMapFilter; 
                          protected var dMap:BitmapData = new BitmapData(200, 200, true, 0xff0000);
                          protected var dPoint:Point = new Point(0, 0);
      
      
                          public function ZoomableImage()
                          {
                                    super();
      
                                    dFilter = new DisplacementMapFilter();
                                    dFilter.scaleX = dFilter.scaleY = 100;
                                    dFilter.componentX  = 1;        
                                    dFilter.componentY  = 1;
                                    dFilter.mode = DisplacementMapFilterMode.COLOR;
                                    dFilter.color = 0x000000;
                                    dFilter.alpha = 0;
                                    dFilter.mapPoint = dPoint;
                                    dFilter.mapBitmap = dMap;
      
                                    addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
                                    addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
                                    addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                          }
      
                          protected function mouseOverHandler(event:MouseEvent):void
                          {
                                    setFilter(true);
                          }
                          protected function mouseOutHandler(event:MouseEvent):void
                          {
                                    setFilter(false);
                          }
                          protected function mouseMoveHandler(event:MouseEvent):void
                          {
                                    dPoint.x = (event.localX-200/2);
                                    dPoint.y = (event.localY-200/2);
                                    dFilter.mapPoint = dPoint;
                                    setFilter(true);
                          }
                          protected function setFilter(filterVisible:Boolean):void
                          {
                                    if (filterVisible)
                                              this.filters = [dFilter];
                                    else
                                              this.filters = [];
                          }
                }
      }
      
      

       

      Then I have simple application:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication 
                xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                xmlns:local="*">
      
      
                <local:ZoomableImage horizontalCenter="0" verticalCenter="0" source="@Embed('Image.jpg')" />
      
      
      </s:WindowedApplication>
      

       

      The effect is "almost" good:

      zoomable-image-01.png

       

      There is about 100px wide border... Any idea why? I really appreciate any help...