Flex4中使用Path实现画板功能，解决恢复，撤消问题

近期需要做一个画板的功能，又鉴于SDK3.0的例子，现在都用SDK4.0在开发了，

3.0里实现的一些在4.0里并不适合使用；

 

找了很多相关的资料，也不基于Path实现画板功能；

 

最近在官方网上看找到一些资料，拿出来分享一下；

 

再也不用纠结于 多条lineTo, 难解决操作记录的问题，尤其在解决恢复，撤消问题；

 

不多说，贴上代码：

<?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/halo"
               mouseDown="mouseDownHandler(event)"
               minWidth="1024" minHeight="768">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import mx.graphics.SolidColor;
            import mx.graphics.SolidColorStroke;            
            import spark.primitives.Path;            
            private var shape:Path            
            private var pathPoints:Vector.<Point>
            
            private function mouseDownHandler(evt:MouseEvent):void
            {
                shape = new Path();
                pathPoints = new <Point>[new Point(evt.localX, evt.localY)];
                shape.stroke = new SolidColorStroke(0x66CCFF,5,1);
                this.addElement(shape);
                this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
                this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
            }
            
            private function mouseMoveHandler(evt:MouseEvent):void
            {
                pathPoints[pathPoints.length] = new Point(evt.localX, evt.localY);
                constructPath();
            }
            
            private function mouseUpHandler(evt:MouseEvent):void
            {
                pathPoints[pathPoints.length] = new Point(evt.localX, evt.localY);
                constructPath();
                this.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
                this.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);                    
            }
            
            private function constructPath():void
            {
                var dataString = "M "+ pathPoints[0].x +" "+ pathPoints[0].y;
                for(var i:int=1; i< pathPoints.length; ++i)
                {
                    var pt:Point = pathPoints[i];
                    dataString += " L "+ pt.x +" "+pt.y;
                }
                shape.data = dataString;
            }         
         ]]>
    </fx:Script>
    
</s:Application>