flex 實現圖片放大縮小恢復元件
阿新 • • 發佈:2019-02-16
1.使用方法
a.在頁面引用自定義元件的包 xmlns:myzoom="zoomPackage.*"
b.在頁面新增自定義元件,並指定要縮放的物件
3.最終效果
<s:Button id="test" label="點選"/>
<myzoom:ZoomPackage zoomTarget="{test}"/>
2.元件原始碼
/FlexAppToJava/flex_src/zoomPackage/ZoomPackage.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/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(); zoom.originX =0;//viewIMG.width / 2; zoom.originY =0;//viewIMG.height / 2; zoom.zoomWidthFrom = curLevel; zoom.zoomHeightFrom =curLevel; curLevel=curLevel+sfLevel; zoom.zoomWidthTo = curLevel; zoom.zoomHeightTo =curLevel; //curLevel=1+sfLevel; zoom.duration = 1000; zoom.target = zoomTarget; zoom.play(); } } //恢復 public function reSetZoom():void { zoom.stop(); zoom.originX = 0;//viewIMG.width / 2; zoom.originY = 0;//viewIMG.height / 2; zoom.zoomWidthFrom = curLevel; zoom.zoomHeightFrom = curLevel; curLevel=1; zoom.zoomWidthTo = curLevel; zoom.zoomHeightTo =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.最終效果