flex 实现图片放大缩小恢复组件

flex 实现图片放大缩小恢复组件

1.使用方法 a. 在页面引用自定义组件的包 xmlns:myzoom="zoomPackage.*" b.在页面添加自定义组件，并指定要缩放的对象

<s:Button id="test" label="点击"/>
<myzoom:ZoomPackage zoomTarget="{test}"/>

2.组件源码  /FlexAppToJava/flex_src/l

    <?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx=""xmlns:s="library://ns.adobe/flex/spark"xmlns:mx="library://ns.adobe/flex/mx" width="400" height="300"><s:layout><s:BasicLayout/></s:layout><fx:Script><![CDATA[[Bindable]private var sfLevel:Number=0;//缩放增量[Bindable]private var curLevel:Number=1;//当前缩放级别[Bindable]public var zoomTarget:Object;//当前缩放对象//------------页面调用方法--------------protected function enlarge_clickHandler(event:MouseEvent):void{sfLevel=0.1;doZoom();}protected function narrow_clickHandler(event:MouseEvent):void{sfLevel=-0.1;doZoom();}protected function recovery_clickHandler(event:MouseEvent):void{reSetZoom();}//-----------内部调用方法---------//放大缩小public function doZoom():void {if(zoomTarget!=null){zoom.stop();iginX =0;//viewIMG.width / iginY =0;//viewIMG.height / WidthFrom = HeightFrom =curLevel;curLevel=curLevel+WidthTo = HeightTo =curLevel;//curLevel=1+sfLevel;zoom.duration = 1000;zoom.target = zoomTarget;zoom.play();}}//恢复public function reSetZoom():void {zoom.stop();iginX = 0;//viewIMG.width / iginY = 0;//viewIMG.height / WidthFrom = HeightFrom = curLevel;curLevel=WidthTo = HeightTo =curLevel;zoom.duration = 1000;zoom.target = zoomTarget;zoom.play();}]]></fx:Script><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --><mx:Zoom id="zoom"/></fx:Declarations><s:HGroup><s:Button id="enlarge" label="放大" click="enlarge_clickHandler(event)"/><s:Button id="narrow" label="缩小" click="narrow_clickHandler(event)"/><s:Button id="recovery" label="恢复" click="recovery_clickHandler(event)" /></s:HGroup></s:Group> 

3.最终效果