Skip navigation
Currently Being Moderated

Problem with DisplacementMapFilter - I need cool magnifying glass efect

Feb 23, 2014 12:41 PM

Tags: #image #flex #zoom #glass #magnifying

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...

 

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points