`
shlei
  • 浏览: 287988 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Flex Canvas组件放大缩小

    博客分类:
  • FLEX
阅读更多
拓展canvas组件,使其里面的组件能够放大,缩小,滚轮放大缩小,鼠标点击移动。
package cn.ipanel.zzt.toolBarContainer  
{  
 import flash.display.DisplayObject;  
 import flash.events.MouseEvent;  
   
 import mx.containers.Canvas;  
 import mx.containers.HBox;  
 import mx.controls.Button;  
 import mx.core.UIComponent;  
 import mx.effects.Zoom;  
  
 public class ToolBarContainer extends Canvas  
 {  
    
  private var isDrag:Boolean;  
  private var quote:Number=1;  
  private var fitQuote:Number=1;  
  private var zoomAll:Zoom;  
  private var zoomChanged:Boolean;  
    
  private var obj:UIComponent;  
    
  public function ToolBarContainer()  
  {  
   //TODO: implement function  
   super();  
     
   addToolBtn();  
     
   this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);  
   this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);  
   this.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);  
   this.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);  
  }  
    
  override public function addChild(child:DisplayObject):DisplayObject{  
   var displayObject:DisplayObject=super.addChild(child);  
     
   if(this.numChildren>1){  
    obj=this.getChildAt(1) as UIComponent;  
      
    this.setChildIndex(obj,0);  
    zoomAll=new Zoom();  
    zoomAll.startDelay=50;  
    zoomAll.duration=200;  
    zoomAll.target=obj;  
      
   }  
   return displayObject;  
  }  
    
  //初始化添加工具栏  
  private function addToolBtn():void{  
     
   var hBox:HBox=new HBox();  
   hBox.x = 10;  
   hBox.y = 10;  
   hBox.setStyle("fontSize",12);  
   var zoomInBtn:Button=new Button();  
   zoomInBtn.width=60;  
   zoomInBtn.height=20;  
   zoomInBtn.label="放大";  
   zoomInBtn.addEventListener(MouseEvent.CLICK,zoomIn);  
   hBox.addChild(zoomInBtn);  
     
   var zoomOutBtn:Button=new Button();  
   zoomOutBtn.width=60;  
   zoomOutBtn.height=20;  
   zoomOutBtn.label="缩小";  
   zoomOutBtn.addEventListener(MouseEvent.CLICK,zoomOut);  
   hBox.addChild(zoomOutBtn);  
     
   var zoomFitBtn:Button=new Button();  
   zoomFitBtn.width=60;  
   zoomFitBtn.height=20;  
   zoomFitBtn.label="适合";  
   zoomFitBtn.addEventListener(MouseEvent.CLICK,fitToContent);  
   hBox.addChild(zoomFitBtn);  
     
   this.addChild(hBox);  
  }  
    
  //放大  
  private function zoomIn(e:MouseEvent):void{  
   this.zoomInObj();  
  }  
    
  private function zoomInObj():void{  
   if(quote<2){//控制放大率  
    if(zoomAll.isPlaying){  
    }else{  
     zoomChanged=true;  
       
     zoomAll.zoomHeightFrom=quote;  
     zoomAll.zoomHeightTo=quote+0.22;  
     zoomAll.zoomWidthFrom=quote;  
     zoomAll.zoomWidthTo=quote+0.22;  
       
     quote=quote+0.22;  
     zoomAll.play();  
    }  
   }  
  }  
    
  //缩小  
  private function zoomOut(e:MouseEvent):void{  
   this.zoomOutObj();  
  }  
    
  private function zoomOutObj():void{  
     
   if(quote>0.09){//控制缩小率  
    if(zoomAll.isPlaying){  
    }else{  
     zoomChanged=true;  
       
     zoomAll.zoomHeightFrom=quote;  
     zoomAll.zoomHeightTo=quote-0.22;  
     zoomAll.zoomWidthFrom=quote;  
     zoomAll.zoomWidthTo=quote-0.22;  
       
     quote=quote-0.22;  
     zoomAll.play();  
    }  
   }  
  }  
    
  //适合  
  private function fitToContent(e:MouseEvent):void{  
   if(zoomAll.isPlaying){}else{  
    zoomAll.zoomHeightFrom=quote;  
    zoomAll.zoomHeightTo=fitQuote;  
    zoomAll.zoomWidthFrom=quote;  
    zoomAll.zoomWidthTo=fitQuote;  
      
    quote=fitQuote;  
    zoomAll.play();  
   }  
  }  
    
    
    
  private function mouseDownHandler(event:MouseEvent):void{  
   if(event.target is Button){  
    isDrag=false;  
   }else{  
    isDrag=true;  
   }  
  }  
    
  private function mouseMoveHandler(event:MouseEvent):void{  
   if(isDrag){  
    //鼠标放在容器内;  
    this.setChildIndex(obj,0);  
    obj.startDrag();  
   }  
  }  
    
  private function mouseUpHandler(event:MouseEvent):void{  
   isDrag=false;  
   obj.stopDrag();  
  }  
  //鼠标滚轮操作;  
  private function mouseWheelHandler(event:MouseEvent):void{  
   if(event.delta>0){  
    this.zoomIn(event);  
   }else{  
    this.zoomOut(event);  
   }  
  }  
    
    
 }  
}  

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xiaoxin888888/archive/2009/07/08/4332353.aspx
分享到:
评论

相关推荐

    支持手动拖拽缩放flex组件的组件

    通过改变矩阵的缩放系数,可以轻松地实现组件的放大和缩小。 4. **限制边界**:为了防止组件被拖拽或缩放到屏幕外,我们需要设定边界条件,确保组件在特定区域内移动和缩放。 5. **交互反馈**:为了提供良好的用户...

    flex对图片打开,剪切,放大缩小,旋转

    在Flex这个强大的富互联网应用程序(RIA)开发框架中,处理图像功能是常见的需求,包括打开图片、剪切、放大缩小以及旋转。Flex以其强大的ActionScript3.0编程语言为基础,结合MXML标记语言,提供了丰富的组件和API...

    flex-object-handles.zip_flex

    在Flex开发中,"flex-object-handles.zip_flex"这个压缩包可能包含了关于如何操作和交互Flex中的对象,特别是涉及到对象的移动、编译、放大和缩小功能的代码示例或教程。Flex是一种基于ActionScript和MXML的开源框架...

    flex示例

    1. **Flex框架**:Flex提供了丰富的UI组件库,如Button、Canvas、Label等,可以快速构建用户界面。同时,它支持数据绑定和事件处理,使得开发者能轻松地将业务逻辑与界面交互结合。 2. **MXML**:MXML是一种标记...

    flex4开发的模E都市地图

    地图的放大缩小功能可能就是通过改变组件的scaleX和scaleY属性实现的。 4. **数据加载与异步通信**:E都市地图的图像通常是分块加载的,这需要用到HTTPService或WebService组件进行异步数据请求。开发者可能使用...

    Flex开发实例.pdf

    - 为地图添加工具栏,提供额外的操作选项,如放大、缩小等。 #### 5. **绘制工具** - 提供绘制工具,允许用户在地图上绘制线路、矩形等图形,增加应用的实用性。 #### 6. **地图图层介绍** - 地图可以支持多个...

    Flex开发实例--学习必备

    - 为地图添加工具栏,方便用户进行地图操作,如放大、缩小、定位等。 #### 5. 绘制工具 - Flex的地图组件支持绘制功能,如画线、画圆等。 - 可以通过ActionScript编程实现自定义的绘制逻辑。 #### 6. 地图图层介绍...

    Flex Gis 开发

    4. **添加工具栏**:为地图添加工具栏,方便用户操作地图,如放大缩小、拖动等。 5. **绘制工具**:提供绘图功能,让用户可以在地图上绘制图形,如点、线、面等。 6. **地图图层介绍**:了解地图的不同图层,以便于...

    软件界面设计工具_3款合集

    使用工具栏按键或键盘或鼠标的滑动缩小放大功能聚焦增量。 使用鼠标的滚动以及滚轮功能快速浏览设计的概况。 剪切、复制与粘贴。 使用可选的canvas向导显示可用的屏幕空间。 通过文本框与书签对您的设计进行注释...

Global site tag (gtag.js) - Google Analytics