Flex "Magnifying Glass" / Masking
I'm making a magnifying glass app and need some help. I currently have the following code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
<mx:Script>
<![CDATA[
// This code assumes it's being run within a display object container
// such as a MovieClip or Sprite instance.
import flash.display.GradientType;
import flash.display.Loader;
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.net.URLRequest;
private function init():void {
// Load an image and add it to the display list.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("images/ZionsMap.png");
loader.load(url);
this.stage.addChild(loader);
// Create a Sprite.
var oval:Sprite = new Sprite();
// Draw a gradient oval.
/* var colors:Array = [0x000000, 0x000000];
var alphas:Array = [1, 0];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
matrix.createGradientBox(200, 100, 0, -100, -50);
oval.graphics.beginGradientFill(GradientType.RADIAL,
colors,
alphas,
ratios,
matrix); */
oval.graphics.beginFill(0xFFFFFF,1.0);
oval.graphics.drawEllipse(-200, -50, 200, 200);
oval.graphics.endFill();
// add the Sprite to the display list
this.stage.addChild(oval);
// Set cacheAsBitmap = true for both display objects.
//loader.cacheAsBitmap = true;
//oval.cacheAsBitmap = true;
// Set the oval as the mask for the loader (and 开发者_如何学Goits child, the loaded image)
loader.mask = oval;
// Make the oval draggable.
oval.startDrag(true);
}
]]>
</mx:Script> </mx:Application>
But am unsure how to have the zoomed "out" image over top of the zoomed "in" image. The current draggable mask will show the zoomed in image through the zoomed out image. Any tips?
Just a pointer: this guy made a pretty cool magnify glass, had this saved in my gmail account for future reference:
http://devsachinonflex.blogspot.com/2010/04/magnifying-glass-in-flex.html
I wrote a plugin for WordPress that makes a magnifying glass.
( http://s.wordpress.org/extend/plugins/glass/screenshot-4.png )
You can see it in action on my blog http://codeblab.com/glass/ that also has some articles explaining how it works. You can look at the JavaScript code if you like, it's GPLed.
精彩评论