`
dxm1986
  • 浏览: 429289 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex中鼠标滑轮控制图片大小

    博客分类:
  • 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>

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics