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>

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值