displacementMapfilter floats with object below it

Question

I've been creating a magnifier class using a standard displacementMapfilter similar to Adobe's and numerous other examples: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7da2.html

The filter is being used at the application level so it filters everything, and there's a large number of image elements that can be dragged, rotated, and scaled around the screen, and when passed below this filter it magnifies them. I also intend to add some more functionality to allow dragging the filter around.

The filter works as intended, magnifying everything that passes by it. The weird thing is whenever an image is being dragged outside of the top or left edge of the screen, the filter floats in that direction the distance it takes before the image is entirely offscreen (ie: the filter floats 500 pixels left if a picture 500 pixels wide is pulled offscreen to the left.)

I'm using an enterFrame listener to constantly update its position, and it works as follows:

private function onEnterFrame(e:Event):void {

    dPoint.x = stage.stageWidth - radius;
    dPoint.y = stage.stageHeight - radius;

    dFilter = new DisplacementMapFilter(map, dPoint, BitmapDataChannel.RED, BitmapDataChannel.BLUE, 100, 100, DisplacementMapFilterMode.IGNORE, 0x000000, 0);

    // The application is a displayObject itself, so just apply filters to "this"
    this.filters = [dFilter];
}

So this code should anchor the filter at the bottom right of the screen, yet somehow whenever an image is dragged off, the filter drifts with it. Is there any reason a filter would do that, and any way I could stop it?

Answer 1

Dragging an image off the stage changes the size and shape of the rectangle the filter is being applied to (picture the filter as if it's taking a snapshot of everything on the stage). When the image moves off the top left, it means that (0, 0) on the filter is actually at the top left corner of the image.

If you check the bounds of the stage (in the stage's own coordinate space), you should see top and left become negative numbers when you drag an image off:

stage.getBounds(stage).top;
stage.getBounds(stage).left;

Cancelling out any negative bounds should keep your filter in the correct position:

var stageBounds:Rectangle = stage.getBounds(stage);
if (stageBounds.left < 0) {
    dPoint.x -= stageBounds.left;
}
if (stageBounds.top < 0) {
    dPoint.y -= stageBounds.top;
}