flex+degrafa自定义曲线ployline绘制

应用程序

<?xml version="1.0" encoding="utf-8"?>
<mx:Application	xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
				xmlns:degrafa="com.degrafa.*"
				xmlns:paint="com.degrafa.paint.*"
				xmlns:geometry="com.degrafa.geometry.*" viewSourceURL="srcview/index.html" 
				 backgroundColor="#ffffff" xmlns:local="*"
				 creationComplete="inipolyline()" xmlns:text="flash.text.*">
				
	<degrafa:Surface id="asur">
	
		<!-- Creating fills. -->
		<degrafa:fills>
			<paint:SolidFill	id="blue"
								color="#62ABCD"/>
		</degrafa:fills>
		
		<!-- Creating Strokes. -->
		<degrafa:strokes>
			<paint:SolidStroke	id="black"
								color="#000000"
								alpha="1"
								weight="3"/>
			<paint:SolidStroke	id="red"
								color="#FF0000"
								alpha="1"
								weight="3"/>
		</degrafa:strokes>
		<!-- Creating Polyline-->
		<!-- Creating a Geometry Group. -->
		<degrafa:GeometryGroup x="0" y="0">
		
			<!-- Creating a Polygon. -->
			<geometry:Polyline stroke="{black}">
				<geometry:data>0,0 0,20 20,20 20,40 40,40 40,60</geometry:data>
			</geometry:Polyline>
			
		</degrafa:GeometryGroup> 
		<!--自定义曲线-->
		<degrafa:GeometryGroup x="0" y="100" id="geopolytl"/>
	</degrafa:Surface>
	<mx:Button  click="deletepolyline()"  label="deletepolyline" x="100" y="0"/>
	<mx:Script>
		<![CDATA[
			import com.degrafa.GraphicText;
			import com.degrafa.IGeometry;
		public function deletepolyline():void
		{
			    for each(var g:GeometryGroup in asur.graphicsCollection.items)
	        {
	            g.target = null;
	            g.visible = false;
	            for each(var o:IGeometry in g.geometryCollection.items)
	            {
	                o.data = "";
	                g.geometryCollection.removeItem(o);
	            }
	            g.geometry.length = 0;
	            g = null;
	        }
	        asur.graphicsCollection.items.length = 0;
		}
		public function inipolyline():void
		{
		    var polytl: DashedPolylinetl= new DashedPolylinetl();
	        polytl.dash=10;
	        polytl.gap=4;
	        polytl.style=2;
	        var datastl:String="0,0 0,20 20,20 20,40 40,40 40,60 60,60 60,0 ";
	        polytl.data=datastl;
	        polytl.colour=0x1f1fd5;
	        geopolytl.geometryCollection.addItem(polytl);         
		}
			
		]]>
	</mx:Script>
</mx:Application>

自定义的类dashpolylinet1

package  
{   
	import com.degrafa.core.collections.GraphicPointCollection;
	import com.degrafa.geometry.Polyline;
	
	import flash.display.Graphics;
	import flash.geom.Rectangle;
	
	import mx.events.PropertyChangeEvent;
public class DashedPolylinetl extends Polyline
{   
	/**
	 * 构造函数，其中定义了style属性的change事件
	 * */
	public function DashedPolylinetl(points:Array=null)
	{
		super(points);
		addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,redraw);
	}
   /**
   * commandstack用于存储直线绘制信息，主要是moveto和lineto命令 
   **/
    public var	commandstack:Array = new Array();
    private var _points:GraphicPointCollection;
    public var _bounds:Rectangle=new Rectangle();
   
   	override	public function get points():Array{
			if(!_points){_points = new GraphicPointCollection();}
			return _points.items;
		}
	override	public function set points(value:Array):void{			
			if(!_points){_points = new GraphicPointCollection();}
			_points.items = value;
						
			//add a listener to the collection
			if(_points && enableEvents){
				_points.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,propertyChangeHandler);
			}
			
			invalidated = true;
		
		}
        
        /**
        * 计算dashpolyline的外接矩形
		**/
		  private function calcBounds():void{
		
			var boundsMaxX:Number =0;
			var boundsMaxY:Number =0;
			var boundsMinX:Number =Number.MAX_VALUE;
			var boundsMinY:Number =Number.MAX_VALUE;
						
			for (var i:int = 0;i< _points.items.length; i++) 
			{
				boundsMaxX = Math.max(boundsMaxX, _points.items[i].x);
				boundsMaxY = Math.max(boundsMaxY, _points.items[i].y);
				
				boundsMinX= Math.min(boundsMinX, _points.items[i].x);
				boundsMinY= Math.min(boundsMinY, _points.items[i].y);
				
			}

			_bounds = new Rectangle(boundsMinX,boundsMinY,boundsMaxX-boundsMinX,boundsMaxY-boundsMinY);

		}	
   
   public var length:Number;

   private var _dash:Number;
    /**
     * 每段直线的长度，默认值为0
     **/
    public function get dash():Number
    {
    	if (!_dash)
    		return 0;
		return _dash;
    }
    public function set dash(value:Number):void
    {
		if (_dash != value)
		{
			_dash = value;
			if (gap == 0)
				gap = value;			
			invalidated = true;
        }
    }
    
    private var _style:int;
    
    public function get style():int
    {   if(!_style)
            return 0;
    	return _style;
    }
    
    /**
    * 在style属性change之后分发PropertyChangeEvent事件
    **/
    public function set style(value:int):void
    { 
    	
     if(_style != value)
     {
     	_style=value;
     	invalidated= true;
     }	
     dispatchEvent(new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE,false,false, null,int,null,null,this.style));
    }
    
    private var _gap:Number;
  
    /**
     *每段直线之间的距离，默认值为0
     **/
    public function get gap():Number
    {
    	if (!_gap)
    		return 0;
		return _gap;
    }
    public function set gap(value:Number):void
    {
		if (_gap != value)
		{
			_gap = value;
			invalidated = true;
        }
    }
    private var _colour:uint;
  
    /**
     *线的颜色
     **/
    public function get colour():uint
    {
    	if (!_colour)
    		return 0;
		return _colour;
    }
    public function set colour(value:uint):void
    {
		if (_colour != value)
		{
			_colour = value;
			invalidated = true;
        }
    }

	/**
     * 用于绘制之前的指令算法存储至commandstack数组中
     * 根据style值，重组绘制线的数据；
     * style=4,线形为直线，无论如何设置dash,gap，都按照原始data两点一连画直线；
     * style=0,线形为虚线，dash为虚线线段长,gap为虚线间隔，根据二者对原始data进行重组，新的data数据点数大于原始data点个数；
     *         要保证虚线效果，dash+gap必须小于线任意两点间隔或最小距离两点间的距离
     * style=2,线形为虚线并且间隔中有两点，dash为虚线线段长,gap为虚线间隔，根据二者对原始data进行重组，新的data数据点数大于原始data点个数；
     *         要保证效果，该线形适用于数据点任意两点距离大于20的data，线中dash+gap必须小于线任意两点间隔或最小距离两点间的距离，
     *         gap中画了两个点，其位置和gap,dash都有关系，两点距离为20时，dash=10,gap=10，能看到两点效果；算法需要继续改进
     * style=3,线形为虚线并且间隔中有一点，dash为虚线线段长,gap为虚线间隔，根据二者对原始data进行重组，新的data数据点数大于原始data点个数；
     *         要保证效果，该线形适用于数据点任意两点距离大于20的data，线中dash+gap必须小于线任意两点间隔或最小距离两点间的距离，
     *         gap中画了一个点，其位置和gap,dash都有关系，两点距离为20时，dash=5,gap=5，能看到效果；算法需要继续改进
     * style=1,线形为铁路线，算法有问题，无法画出来效果图
      **/
    override public function preDraw():void
    {
		if(invalidated)
		{  
	    	super.preDraw();
          if(points.length==0){ return;}
            commandstack.length=0;                                            
			commandstack.push({type:"m",x:points[0].x+x,y:points[0].y+y});
			//如果style=4,即使设置了dash,gap,它们也不起作用
			if (style==4)
			{    
				for (var i:int = 0;i < points.length; i++)
				{
					commandstack.push({type:"l",x:points[i].x+x,y:points[i].y+y});
				}  
			}
			else
			{   
			   for (var j:int = 0;j < points.length-1; j++)
				switch(style)
				{
				case 0:
					addDashCommands0(commandstack, points[j].x+x, points[j].y+y,points[j+1].x+x, points[j+1].y+y);
				    break;
				case 1:
					  addDashCommands1(commandstack, points[j].x+x, points[j].y+y,points[j+1].x+x, points[j+1].y+y);
                      break;
				case 2:
				case 3:
					addDashCommands2(commandstack, points[j].x+x, points[j].y+y,points[j+1].x+x, points[j+1].y+y);
				      	break;
				default: break;      
				}
			}
                        
			/**
			 * 用于封闭的polyline
			 * */
			if(autoClose)
			{
				commandstack.push({type:"l",x:points[0].x+x,y:points[0].y+y});
			}
	    	calcBounds();
			invalidated = false;
	    }
            
    }
    
    protected var leftOver:int = 0;
    protected var leftOverCount:int = 0;
    
    /**
    *绘制虚线的commandstack命令
    **/
    protected function addDashCommands0(commandstack:Array, x1:int, y1:int, x2:int, y2:int):void
    {
		var length:Number = Math.abs(Math.sqrt(Math.pow(x1-x2, 2) + Math.pow(y1-y2, 2)));  //线段长度
		var count:int = leftOverCount;
		var currentLength:int = 0;  //当前长度
		var ratio:Number = 1;       //比例
		while (currentLength < length)
		{
			
			// 绘制直线
			if (count % 2 == 0)
			{
				currentLength += dash - leftOver;
				ratio = Math.min(1,(currentLength / length));
				commandstack.push({type:"l",x:x1 + ((x2-x1)*ratio),y:y1 + ((y2-y1)*ratio)});
			}
			else
			{
				currentLength += gap - leftOver;
				ratio = Math.min(1,(currentLength / length));
				
				commandstack.push({type:"m",x:x1 + ((x2-x1)*ratio),y:y1 + ((y2-y1)*ratio)});
			}
			if (currentLength > length)
			{
				leftOver = ((count % 2 == 0) ? dash : gap) - (currentLength - length);
				leftOverCount = count;
			}
			else
			{
				leftOver = 0;
				leftOverCount = 0;
			}
			count++;
		}     	
    }
    
        /**
        * 绘制铁路线的commandstack命令
        **/ 
         protected function addDashCommands1(commandStack:Array, x1:int, y1:int, x2:int, y2:int):void
    {
		var length:Number = Math.abs(Math.sqrt(Math.pow(x1-x2, 2) + Math.pow(y1-y2, 2)));  //线段长度
		var count:int = leftOverCount;
		var currentLength:int = 0;  //当前长度
		var ratio:Number = 1;       //比例
		while (currentLength < length)
		{
			
			// dash
			if (count % 2 == 0)
			{
				currentLength += dash - leftOver;
				ratio = Math.min(1,(currentLength / length));
				commandStack.push({type:"l",x:x1 + ((x2-x1)*ratio),y:y1 + ((y2-y1)*ratio)});
			}
			else
			{
				currentLength += gap - leftOver;
				ratio = Math.min(1,(currentLength / length));
				
				commandStack.push({type:"mm",x:x1 + ((x2-x1)*ratio),y:y1 + ((y2-y1)*ratio)});
			}
			if (currentLength > length)
			{
				leftOver = ((count % 2 == 0) ? dash : gap) - (currentLength - length);
				leftOverCount = count;
			}
			else
			{
				leftOver = 0;
				leftOverCount = 0;
			}
			count++;
		}    	
    }
    
    /**
    * 绘制单点线或者双点线的commandstack命令
    **/  
            protected function addDashCommands2(commandstack:Array, x1:int, y1:int, x2:int, y2:int):void
    {
		length= Math.abs(Math.sqrt(Math.pow(x1-x2, 2) + Math.pow(y1-y2, 2)));  //线段长度
		var count:int = leftOverCount;
		var currentLength:int = 0;  //当前长度
		var ratio:Number = 1;       //比例
		while (currentLength < length)
		{
			
			// dash
			if (count % 2 == 0)
			{
				currentLength += dash - leftOver;
				ratio = Math.min(1,(currentLength / length));
				commandstack.push({type:"l",x:x1 + ((x2-x1)*ratio),y:y1 + ((y2-y1)*ratio),x0:x2-x1,y0:y2-y1,xd:((x2-x1)*ratio),yd:((y2-y1)*ratio)});
			}
			else
			{
				currentLength += gap - leftOver;
				ratio = Math.min(1,(currentLength / length));
				
				commandstack.push({type:"m",x:x1 + ((x2-x1)*ratio),y:y1 + (y2-y1)*ratio});
			}
			if (currentLength > length)
			{
				leftOver = ((count % 2 == 0) ? dash : gap) - (currentLength - length);
				leftOverCount = count;
			}
			else
			{
				leftOver = 0;
				leftOverCount = 0;
			}
			count++;
		}     	
    }
           /**
           * 根据style参数来绘制不同的线型
           **/
           
           	private var item:Object;
			private var lengths:Number;
			private var sin:Number;
			private var cos:Number;
			private var xx0:Number;
			private var yy0:Number;
			private var xx:Number;
			private var yy:Number;
			private var dx:Number;
			private var dy:Number;

	   		override public function draw(graphics:Graphics,rc:Rectangle):void{
					
		 	preDraw();
		 							
			if(!rc)				
				super.draw(graphics,_bounds);	
			else
				super.draw(graphics,rc);
			
			for each (item in commandstack)
			{
			graphics.lineStyle(0.1,colour,1);	
			lengths=Math.abs(Math.sqrt(Math.pow(item.x0, 2) + Math.pow(item.y0, 2))) 	
        	sin=item.x0/lengths;//直线的sin值
        	cos=item.y0/lengths;  //直线的cos值 	
        	xx0=item.x+dash*sin/4;               //单点直线的x-coordinate起始位置
        	yy0=item.y+dash*cos/4;               //单点直线的y-coordinate结束位置
        	xx=item.x+dash*sin/2;                //双点直线的x-coordinate起始位置
        	yy=item.y+dash*cos/2;                //双点直线的y-coordinate结束位置
        	dx=(item.x0==0?0:(item.x0)/Math.abs(item.x0));//中间变量，即点的x-coordinate移动距离（取值为0，1，-1）
        	dy=(item.y0==0?0:(item.y0)/Math.abs(item.y0));//中间变量，即点的y-coordinate移动距离（取值为0，1，-1）
        	if(item.type=="m")
        	graphics.moveTo(item.x,item.y);
			else 
			switch(style)
			{
			//绘制虚线的算法	
			case 0:
			//绘制实线的算法
			case 4:
			  {
        		
        		graphics.lineTo(item.x,item.y);
        	    break;
			  }
			case 1:  //绘制铁路线（或者变色线的算法）
			  {
        		  	//graphics.moveTo(item.x,item.y);
        		    if(item.type=="mm")
        		    {
        	         graphics.lineStyle(1,0xff0000,1,true);
        	         graphics.lineTo(item.x,item.y);
        	        }
        		   else 
        		  {
        		    graphics.lineStyle(1,0x000000,1,true);	
        			graphics.lineTo(item.x,item.y);
        		  }
        	    break;
			  }
			  
			case 2:   //绘制双点线型的算法
			  { 
        		graphics.lineTo(item.x,item.y);      
        		 if((Math.abs(xx+dx)<=Math.max(Math.abs(item.x),Math.abs(item.x+item.x0-item.xd)))&&(Math.abs(yy+dy)<=Math.max(Math.abs(item.y),Math.abs(item.y+item.y0-item.yd))))
        		 {        		
        		graphics.moveTo(xx0,yy0);
        		graphics.lineTo(xx0+dx,yy0+dy);//绘制单点,即利用lineto来绘制直线
        		graphics.moveTo(xx,yy);
        		graphics.lineTo(xx+dx,yy+dy);  //绘制双点,即利用lineto来绘制直线
                 }
			  	break;
			  }
			case 3:  //绘制单点线型的算法
			   {
        		graphics.lineTo(item.x,item.y);              //设置线条样式，绘制直线
        		//判断点的绘制是否执行，当点直线x-coordinate和y-coordinate的起始位置在直线之内则绘制单点
        		if((Math.abs(xx)<=Math.max(Math.abs(item.x),Math.abs(item.x+item.x0-item.xd)))&&(Math.abs(yy)<=Math.max(Math.abs(item.y),Math.abs(item.y+item.y0-item.yd))))
        		{        		
        		graphics.moveTo(xx,yy);
        		graphics.lineTo(xx+dx,yy+dy); //绘制单点,即利用lineto来绘制直线
                }
			   	 break;
			   }
			}
			}
			super.endDraw(graphics);
			
			
		}
		  /**
		  * 当style属性发生change则调用重绘函数，能够及时的响应线型改变进行重绘(由于会产生bug导致暂时屏蔽重绘功能，因为会报ss引用为Null)
		  * */
		    public  function redraw(e:PropertyChangeEvent):void
    {
    	    
//    	    draw(ss.graphics,null);
    }
    public function commandstackclear():void
    {
      
    }
	
}

}