使用flex4画直线和圆

想要画出多条直线或圆，需要有两个画板，暂时分别称为临时画板和底板吧。临时画板主要用来画从鼠标按下到松开这个过程中的图，鼠标送开的时候就要清楚掉临时画板上的图，根据记录的鼠标按下和松开的点的位置，在底板上画出要画的图。

具体代码如下（使用flex4开发）：

<?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"  width="100%" height="100%">
    <fx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.binding.utils.BindingUtils;
            import mx.controls.Alert;
            import mx.core.UIComponent;

            private var mX:Number;
            private var mY:Number;
            private var IsDown:Boolean=false;
            private var sprite:Sprite;
            private var uic:UIComponent;

            public var lineSize:int = 3;
            [Bindable]
            public var lineColor:int=0xccddaa;
            public var type:String = ""; //draw的类型，本例有两种类型：line、circle

            //切换画图类型，需要先移除之前类型的事件监听。
            private function beforeDraw():void {
                if(type != "") {
                    paperFault.removeEventListener(MouseEvent.MOUSE_DOWN,this[type+"DownHandler"]); ////根据类型得出函数名，所以函数命名的时候要遵守type+"事件类型handler"
                    paperFault.removeEventListener(MouseEvent.MOUSE_UP,this[type+"UpHandler"]);
                    paperFault.removeEventListener(MouseEvent.MOUSE_MOVE,this[type+"MoveHandler"]);
                }
                IsDown = false;
            }

            private function DrawLine():void{
                beforeDraw();
                paperFault.addEventListener(MouseEvent.MOUSE_DOWN,lineDownHandler);
                paperFault.addEventListener(MouseEvent.MOUSE_MOVE,lineMoveHandler);
                paperFault.addEventListener(MouseEvent.MOUSE_UP,lineUpHandler);
                BindingUtils.bindProperty(this,"lineColor",cp,"selectedColor");
                type = "line";
            }
            private function lineMoveHandler(e:MouseEvent):void{
                if(IsDown){
                    var x:Number=paper.mouseX;
                    var y:Number=paper.mouseY;

                    paperFault.contentGroup.graphics.clear();
                    paperFault.contentGroup.graphics.lineStyle(lineSize,lineColor,1);

                    paperFault.contentGroup.graphics.moveTo(mX,mY);
                    paperFault.contentGroup.graphics.lineTo(x,y);

                }
            }

            private function lineDownHandler(e:MouseEvent):void{
                IsDown=true;
                mX=paper.mouseX;
                mY=paper.mouseY;
            }   

            private function lineUpHandler(e:MouseEvent):void{
                paper.contentGroup.graphics.lineStyle(lineSize,lineColor,1);

                paper.contentGroup.graphics.moveTo(mX,mY);
                paper.contentGroup.graphics.lineTo(paper.mouseX,paper.mouseY);
                IsDown=false;
            }   

            private function doChange():void{
                lineSize=int(sel.value);
            }

            private function clear():void {
                paperFault.contentGroup.graphics.clear();
                paper.contentGroup.graphics.clear();
            }

            //画圆
            private function drawCircle():void {
                beforeDraw();
                paperFault.addEventListener(MouseEvent.MOUSE_DOWN,circleDownHandler);
                paperFault.addEventListener(MouseEvent.MOUSE_MOVE,circleMoveHandler);
                paperFault.addEventListener(MouseEvent.MOUSE_UP,circleUpHandler);
                BindingUtils.bindProperty(this,"lineColor",cp,"selectedColor");
                type = "circle";
            }

            private function circleDownHandler(e:MouseEvent):void{
                IsDown=true;
                mX=paper.mouseX;
                mY=paper.mouseY;
            }   

            private function circleMoveHandler(event:MouseEvent):void {
                if(IsDown) {
                    var x:Number=paper.mouseX;
                    var y:Number=paper.mouseY;

                    paperFault.contentGroup.graphics.clear();
                    paperFault.contentGroup.graphics.lineStyle(lineSize,lineColor,1);
                    var r:Number = Math.sqrt(Math.pow(x-mX,2)+Math.pow(y-mY,2));
                    paperFault.contentGroup.graphics.drawCircle(x,y,r);
                }
            }

            private function circleUpHandler(event:MouseEvent):void {
                paper.contentGroup.graphics.lineStyle(lineSize,lineColor,1);
                var x:Number=paper.mouseX;
                var y:Number=paper.mouseY;
                var r:Number = Math.sqrt(Math.pow(x-mX,2)+Math.pow(y-mY,2));
                paper.contentGroup.graphics.drawCircle(x,y,r);
                IsDown=false;
            }

        ]]>
    </fx:Script>
    <s:Panel  title="drawing" width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <s:HGroup width="100%">
            <mx:ColorPicker id="cp" selectedColor="{lineColor}"/>
            <s:NumericStepper id="sel" change="doChange()"/>
            <s:Button  label="直线" id="line" click="DrawLine()"/>
            <s:Button  label="画圆" click="drawCircle()"/>
            <s:Button label="clear" click="clear()"/>
        </s:HGroup>
        <s:Panel width="100%" height="100%" title="记事板" fontFamily="中易宋体">
            <s:BorderContainer id="paper"  width="100%" height="100%" contentBackgroundColor="#FFFFFF" chromeColor="#120101" y="0">
                <s:BorderContainer id="paperFault" width="100%" height="100%"  backgroundAlpha="0" borderWeight="0" />
            </s:BorderContainer>
        </s:Panel>
    </s:Panel>
</s:Application>