flex 学习笔记 graphics(二)

新建一个Canvs,然后通过监听鼠标事件用Graphics在Canvas里面画图,代码如下:

  
  
  
  
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
  3.    
  4.       xmlns:s="library://ns.adobe.com/flex/spark"    
  5.    
  6.       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="init()">   
  7. <fx:Declarations>   
  8.   <!-- 将非可视元素(例如服务、值对象)放在此处 -->   
  9. </fx:Declarations>   
  10. <fx:Script>   
  11.   <![CDATA[   
  12.    import mx.containers.Canvas;   
  13.    import mx.controls.Alert;   
  14.    import mx.controls.Image;   
  15.    var g:Graphics;   
  16.    var is_drawing:Boolean;   
  17.    var temp:JPEGLoaderContext;   
  18.    //var pen:Canvas=new Canvas();   
  19.    //var huabu:Image;   
  20.    public function init():void{   
  21.     huabu.source="1.jpg";   
  22.         this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);   
  23.     this.addEventListener(MouseEvent.MOUSE_MOVE,drawing);   
  24.     this.addEventListener(MouseEvent.MOUSE_UP,endDraw);   
  25.     //this.addChild(huabu);   
  26.     this.setChildIndex(huabu,0);   
  27.     this.setChildIndex(pen,1);   
  28.    }   
  29.    private function beginDraw(e:MouseEvent):void{   
  30.     g=pen.graphics;   
  31.     is_drawing=true;   
  32.     g.lineStyle(10);   
  33.     g.moveTo(pen.mouseX,pen.mouseY);   
  34.     //Alert.show(e.target.toString());   
  35.    }   
  36.    private function drawing(e:MouseEvent):void{   
  37.     //Alert.show(e.currentTarget.toString());   
  38.     if(is_drawing){   
  39.      g.lineTo(pen.mouseX,pen.mouseY);   
  40.     }   
  41.     //myx.text=huabu.width.toString();   
  42.     //myy.text=huabu.height.toString();   
  43.  
  44.    }   
  45.    private function endDraw(e:MouseEvent):void{   
  46.     is_drawing=false;   
  47.    }   
  48.   ]]>   
  49. </fx:Script>   
  50. <mx:Canvas id="pen" width="274" height="230" x="59" y="57">   
  51. </mx:Canvas>   
  52. <mx:Image  id="huabu" width="441" height="393" x="68" y="57" >   
  53. </mx:Image>   
  54. </s:Application>  

效果:

 

你可能感兴趣的:(Flex)