FLEX自学笔记（1）

<!--绘图画线——橡皮筋线-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="draw.graphics.clear()">
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import flash.display.DisplayObject;
            import com.andy.IDraw.DrawOnPanel;
            public var a:Point = new Point();
            public var b:Point = new Point();
            public var old:Point = new Point();
            public var stateOfDraw:Boolean = false;
            public var isDown:Boolean = false;
            private var draw:DrawOnPanel = new DrawOnPanel(a,b);
            
            
            private function doDraw():void
            {
                var component:UIComponent = new UIComponent();
                myPic.addChild(component);
                component.addChild(draw);
                draw.DrawLine();
            }
            
            private function doDrawStart(event:MouseEvent):void{
                isDown = true;
                if(stateOfDraw)
                    {
                        a.x = mouseX;
                        a.y = mouseY;
                    }
            }
            
            private function doMove(event:MouseEvent):void{
                if(isDown)
                    if(stateOfDraw)
                        {
                            draw.graphics.clear();
                            b.x = mouseX;
                            b.y = mouseY;
                            doDraw();
                        }
            }
            
            private function doDrawEnd(event:MouseEvent):void{
                if(isDown)
                    {
                        if(stateOfDraw)
                        {
                            b.x = mouseX;
                            b.y = mouseY;
                            doDraw();
                        }
                        isDown = false;
                    }
            }
            
            private function setdraw():void{
                draw.graphics.clear();
                stateOfDraw = true;
            }
        ]]>
    </mx:Script>
    <mx:ApplicationControlBar width="100%" height="100%">
        <mx:VBox width="100%" height="100%">
            <mx:Canvas id="myPic" width="100%" height="100%" mouseDown="doDrawStart(event)" mouseUp="doDrawEnd(event)" mouseMove="doMove(event)"/>
            <mx:Button label="draw" click="setdraw()"/>
        </mx:VBox>
    </mx:ApplicationControlBar>
</mx:Application>

/*
* 心得体会： 主要部分在于对于鼠标按下事件、移动事件、弹起事件的处理和逻辑判断，
* 而且在编码过程中犯了的错误在于乱用this指针，对于this指针和flex空间的继承
* 层次及其生命周期的理解不深入，另外对于当前UI空间（主要是继承自SPRITE）的
* 控件调用graphics.clear()方法会清除其中的绘图。
 */
package com.andy.IDraw
{
    import flash.display.Graphics;
    import flash.display.Sprite;
    import flash.geom.Point;
    import flash.display.CapsStyle;
    import flash.display.LineScaleMode;
    
    import mx.containers.Panel;
    public class DrawOnPanel extends Sprite
    {
        public var _startPos:Point;
        public var _endPos:Point;
        
        public function DrawOnPanel(startPos:Point,endPos:Point)
        {
            
            this._startPos = startPos;
            this._endPos = endPos;
        }
        
        public function DrawLine():void
        {
                this.graphics.lineStyle(3, 0x990000, 0.25, false,LineScaleMode.NONE, CapsStyle.SQUARE);
                this.graphics.moveTo(this._startPos.x,this._startPos.y);
                this.graphics.lineTo(this._endPos.x,this._endPos.y);            
        }

    }
}