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>

   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>

效果：