Flex中鼠标滑轮控制图片大小
??
??? 前两天给我的FLEX博客(www.wolfdream.cn)加了一个鼠标滑动条控制图片大小的功能,主要是通过在图片上加鼠标滑轮滚动事件,然后根据滑轮滚动时,获得那个刻度上的值(滑轮向上滚为正值,向下滚为负值),然后再动态调整图片的长和宽。
? ?下面把代码贴出来一下:
?
<?xml version="1.0" encoding="utf-8"?><mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="500" backgroundColor="#0A7276" toolTip="鼠标滑轮滚动可以控制图片大小" showCloseButton="true" close="closeWindow()" initialize="init()" borderColor="#0A7276" headerHeight="20" title="{imgname}" ><mx:Script><![CDATA[import mx.controls.Alert; import mx.managers.PopUpManager;private function closeWindow():void{ mx.managers.PopUpManager.removePopUp(this);}[Bindable]private var source:String;[Bindable]private var imgname:String;private function init():void{this.width=this.screen.width-300;this.height=this.screen.height-50; this.x=(this.screen.width-this.width)/2; this.y=(this.screen.height-this.height)/2; source=LatestImage.path;imgname=LatestImage.iname;addEventListernerToImage();}private function showSrcpage():void{ var u:URLRequest=new URLRequest(image.source.toString()); navigateToURL(u,'_blank');}private function addEventListernerToImage():void{ this.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);}private function mouseWheelHandler(event:MouseEvent):void{ resizeImageSize(event.delta);//deta为滑轮滚动时的刻度值}private function resizeImageSize(size:int):void{var w:int;var h:int; if(size>0){ w=image.width*(1+size/10); h=image.height*(1+size/10); }else if(size<0){ w=image.width/(1-size/10) h=image.height/(1-size/10) } if(image.width<50||image.height<50){ w=50; h=50*(image.height/image.width); }else if(image.width>=this.width||image.height>=this.height){ h=this.height-50; w=(h*image.width)/image.height; } image.width=w; image.height=h;}]]></mx:Script> <mx:VBox height="100%" width="100%"><mx:HBox height="100%" width="100%"><mx:Spacer width="50%"/><mx:Image width="100%" height="100%" maxHeight="{this.height-40}" maxWidth="{this.width-50}" source="{source}" id="image" toolTip="{imgname}:点击查看原图片" click="showSrcpage()" mouseChildren="false" buttonMode="true" useHandCursor="true" /><mx:Spacer width="50%"/></mx:HBox> </mx:VBox> </mx:TitleWindow>
?
?
?