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>

 

posted @ 2011-07-18 15:09  Marksion  阅读(1905)  评论(8编辑  收藏  举报