flex 学习笔记 graphics（二）

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

 
 

<?xml?version="1.0"?encoding="utf-8"?>? ?
  
  

<s:Application?xmlns:fx="http://ns.adobe.com/mxml/2009"?? ?

  
  
? ?
  
  

??????xmlns:s="library://ns.adobe.com/flex/spark"?? ?

  
  
? ?
  
  

??????xmlns:mx="library://ns.adobe.com/flex/mx"?minWidth="955"?minHeight="600"?applicationComplete="init()">? ?

  
  

<fx:Declarations>? ?

  
  

??<!--?将非可视元素（例如服务、值对象）放在此处?-->? ?

  
  

</fx:Declarations>? ?

  
  

<fx:Script>? ?

  
  

??<![CDATA[? ?
  
  
???import?mx.containers.Canvas;? ?
  
  
???import?mx.controls.Alert;? ?
  
  
???import?mx.controls.Image;? ?
  
  
???var?g:Graphics;? ?
  
  
???var?is_drawing:Boolean;? ?
  
  
???var?temp:JPEGLoaderContext;? ?
  
  
???//var?pen:Canvas=new?Canvas();? ?
  
  
???//var?huabu:Image;? ?
  
  
???public?function?init():void{? ?
  
  
????huabu.source="1.jpg";? ?
  
  
????????this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);? ?
  
  
????this.addEventListener(MouseEvent.MOUSE_MOVE,drawing);? ?
  
  
????this.addEventListener(MouseEvent.MOUSE_UP,endDraw);? ?
  
  
????//this.addChild(huabu);? ?
  
  
????this.setChildIndex(huabu,0);? ?
  
  
????this.setChildIndex(pen,1);? ?
  
  
???}? ?
  
  
???private?function?beginDraw(e:MouseEvent):void{? ?
  
  
????g=pen.graphics;? ?
  
  
????is_drawing=true;? ?
  
  
????g.lineStyle(10);? ?
  
  
????g.moveTo(pen.mouseX,pen.mouseY);? ?
  
  
????//Alert.show(e.target.toString());? ?
  
  
???}? ?
  
  
???private?function?drawing(e:MouseEvent):void{? ?
  
  
????//Alert.show(e.currentTarget.toString());? ?
  
  
????if(is_drawing){? ?
  
  
?????g.lineTo(pen.mouseX,pen.mouseY);? ?
  
  
????}? ?
  
  
????//myx.text=huabu.width.toString();? ?
  
  
????//myy.text=huabu.height.toString();? ?
  
  
?
  
  
???}? ?
  
  
???private?function?endDraw(e:MouseEvent):void{? ?
  
  
????is_drawing=false;? ?
  
  
???}? ?
  
  
??]]>? ?
  
  

</fx:Script>? ?

  
  

<mx:Canvas?id="pen"?width="274"?height="230"?x="59"?y="57">? ?

  
  

</mx:Canvas>? ?

  
  

<mx:Image??id="huabu"?width="441"?height="393"?x="68"?y="57"?>? ?

  
  

</mx:Image>? ?

  
  

</s:Application>??

 
 

效果：