Wednesday, August 26, 2009

Magnifier tool in flex+Air



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]private var bitmapData:BitmapData;

private function update(e:Event):void
{

var matrix:Matrix = new Matrix(1,0,0,1,-Math.abs(mag.x),-Math.abs(mag.y));
bitmapData = new BitmapData(Math.abs(mag.width),Math.abs(mag.height),false,0x000000);
bitmapData.draw(myCantainer,matrix);
mag_img.source = new Bitmap(bitmapData);

}

private function zoom(e:MouseEvent):void
{

if(e.delta > 0)
{
if(mag_img.scaleX <= 10)
{
mag_img.scaleX += 0.1;
mag_img.scaleY += 0.1;
}
}
else
{
if(mag_img.scaleX > 1)
{
mag_img.scaleX -= 0.1;
mag_img.scaleY -= 0.1;
}
}

}

private function magnifierButtonClickHandler(evt:MouseEvent):void
{

mag.visible = true;
mag.includeInLayout = true;
if(!mag.hasEventListener(MouseEvent.MOUSE_MOVE))
{
mag.addEventListener(MouseEvent.MOUSE_MOVE, update);
}

}


]]>
</mx:Script>

<mx:VBox id="myCantainer" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
backgroundColor="red" paddingTop="10" paddingBottom="0">
<mx:Button label="Zoom Example"/>
<mx:TextArea text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to sometimes on purpose (injected humour and the like)." width="535" height="322"/>
</mx:VBox>
<mx:Box id="mag" visible="false" includeInLayout="false" width="370" height="190"
verticalScrollPolicy="off" horizontalScrollPolicy="off" borderStyle="solid" borderThickness="10" cornerRadius="10"
verticalAlign="middle" x="{this.width/2}" y="{this.height/2}"
mouseWheel="{zoom(event)}" mouseWheelOutside="{zoom(event)}" mouseDown="{mag.startDrag()}"
mouseUp="{mag.stopDrag()}" backgroundColor="#FFFFFF" >
<mx:Image id="mag_img" width="600" height="250" verticalCenter="0" horizontalCenter="0" />
</mx:Box>

<mx:Button click="magnifierButtonClickHandler(event)" label="Click to see Magnifier tool"/>
</mx:Application>


Thanks
R.Bhatia

No comments:

Post a Comment