新建一个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>
效果: