flex 虚线 + 沿着虚线移动的箭头 完

1.虚线方向的箭头

package view.line
{
	import flash.geom.Point;
	
	import mx.core.UIComponent;

	public class ArrowUI extends UIComponent
	{
		public static var CENTER:String = "CENTER";
		
		public static var STARTPOINT:String = "STARTPOINT";
		
		public static var ENDPOINT:String = "ENDPOINT";
		
		private var _endPoint:Point;//终点坐标
		
		private var _startPoint:Point;//起点坐标
		
		private var radius:uint=6;//箭头大小
		// 箭头所放的位置，"center" ,"startPoint","endPoint"
		private var _arrowAlign:String = "ENDPOINT";
		
		public function ArrowUI()
		{
			super();
		}
		public function draw():void
		{
			this.graphics.clear();
			var p2:Point;
			var angle:Number = Util.getAngle(startPoint,endPoint);
			switch(_arrowAlign)
			{
				case ArrowUI.ENDPOINT:
					p2= startPoint;
					break;
				case ArrowUI.STARTPOINT:
					p2 = endPoint;
					break;
				default:
					p2= new Point((startPoint.x+endPoint.x)/2,(startPoint.y+endPoint.y)/2);
					break;	
			}
			var centerX:Number = p2.x - radius * Math.cos(angle*(Math.PI/180));
			var centerY:Number = p2.y + radius * Math.sin(angle*(Math.PI/180));
			var leftX:Number = centerX + radius * Math.cos((angle+120)*(Math.PI/180));
			var leftY:Number = centerY - radius * Math.sin((angle+120)*(Math.PI/180));
			var rightX:Number = centerX + radius * Math.cos((angle+240)*(Math.PI/180));
			var rightY:Number = centerY - radius * Math.sin((angle+240)*(Math.PI/180));
			var p1:Point = new Point( leftX , leftY);
			var p3:Point= new Point(rightX , rightY);	
			var p4:Point= new Point(centerX , centerY);	
			drawArrow(p1,p2,p3,p4);
		}
		
		protected function drawArrow(p1:Point,p2:Point,p3:Point,p4:Point):void
		{
            this.graphics.beginFill(fillColor);
			this.graphics.lineStyle(1, fillColor, 1);
            this.graphics.moveTo(p1.x,p1.y);
            this.graphics.lineTo(p2.x,p2.y);
            this.graphics.lineTo(p3.x,p3.y);
            this.graphics.lineTo(p4.x,p4.y); 
            this.graphics.lineTo(p1.x,p1.y);
            this.graphics.endFill(); 
		}
		
		//线填充色(箭头)
		private var _fillcolor:uint = 0x66FF66;//0x0000FF
		
		public function set fillColor(color:uint):void
		{
			_fillcolor=color;
		}
		[Bindable]
		public function get fillColor():uint
		{
			return _fillcolor;
		}
		//起点坐标
		public function set startPoint(p:Point):void
		{
			_startPoint = p;
		}
		public function get startPoint():Point
		{
			return _startPoint;
		}
		//终点点坐标
		public function set endPoint(p:Point):void
		{
			_endPoint = p;
		}
		public function get endPoint():Point
		{
			return _endPoint;
		}
		
		// 箭头所放的位置，"center" ,"startPoint","endPoint"
		public function get arrowAlign():String
		{
			return _arrowAlign;	
		}
		public function set arrowAlign(str:String):void
		{
			_arrowAlign = str;	
		}
	}
}

2. 虚线，及沿着虚线移动的箭头

package view.line
{
	import flash.geom.Point;
	
	import mx.containers.Canvas;
	import mx.effects.Move;
	import mx.events.EffectEvent;


	public class DottedLine extends Canvas
	{
		private var _endPoint:Point;//终点坐标
		
		private var _startPoint:Point;//起点坐标
		
		private var _lineSize:Number = 5;//虚线 空白长度
		
		private var radius:uint=6;//箭头大小
		
		private var _doMove:Boolean = true;// 是否移动
		
		private var _duration:Number = 5000;//箭头运动时间
		
		private var myMove:Move;
				
		private var arrow:ArrowUI ;
		[Bindable]
		private var tooltip:String;
		public function DottedLine()
		{
			//TODO: implement function
			super();  
			this.toolTip = tooltip; 
			arrow = new ArrowUI;
		}
		
		public function drawLine():void
		{
            var xTemp:Number = 0; // x 坐标 count的偏移x坐标差
            var yTemp:Number = 0; // y 坐标 count的偏移y坐标差
            var count:uint = 1; //虚实相间
            
			if(!_startPoint || !_endPoint || _startPoint == _endPoint)
			{
				return;	
			}
			this.graphics.clear();
			this.graphics.beginFill(fillColor);
			this.graphics.lineStyle(1, fillColor, 1);
            this.graphics.moveTo(_startPoint.x,_startPoint.y);
            
            var xLen:Number = -_startPoint.x + _endPoint.x;//起始点x坐标差距
            var yLen:Number = -_startPoint.y + _endPoint.y;//起始点y坐标差距

            var lineLen:Number = Math.sqrt(xLen * xLen + yLen * yLen);
            
//            if(_duration == 0)
//            	_duration = Math.round(lineLen * 20);
            
			xTemp =( _lineSize * xLen )/lineLen;//求出 x 坐标 count的偏移x坐标差
			yTemp =( _lineSize * yLen )/lineLen;//求出 y 坐标count 的偏移y坐标差
			
			var x0:Number = _startPoint.x;
			var y0:Number = _startPoint.y;
			while((lineLen/_lineSize) >= 1)
			{
				x0 = x0 + xTemp;//求出偏移x坐标
				y0 = y0 + yTemp ;//求出偏移y坐标
				if(0 == count%2)
				{
					this.graphics.moveTo(x0,y0);
				}else
				{
					this.graphics.lineTo(x0,y0);
				}
				count++;
				lineLen = lineLen - _lineSize;
			}
//			this.graphics.lineTo(_endPoint.x , _endPoint.y);
            this.graphics.endFill();
            //画箭头 
            arrow.startPoint = this.startPoint;
       		arrow.endPoint = this.endPoint;
       		arrow.arrowAlign = ArrowUI.STARTPOINT;
       		arrow.fillColor = this.fillColor;
   			arrow.draw(); 
			var num:Number = this.numChildren;
   			if(_doMove)
   			{ 
           		this.stopMove();
				myMove = new Move(); 
	       		myMove.xFrom = -endPoint.x + startPoint.x;
	       		myMove.yFrom = -endPoint.y + startPoint.y;
				myMove.xTo = 0;
	       		myMove.yTo = 0;
	       		myMove.repeatCount = 0;
	       		myMove.target = arrow;
	       		myMove.duration = _duration;
				myMove.play();
   			}
   			
		}
		
		//线填充色(箭头)
		private var _fillcolor:uint=0x00FF00;//0x808080
		
		public function set fillColor(color:uint):void
		{
			_fillcolor=color;
		}
		[Bindable]
		public function get fillColor():uint
		{
			return _fillcolor;
		}
		//起点坐标
		public function set startPoint(p:Point):void
		{
			_startPoint = p;
		}
		public function get startPoint():Point
		{
			return _startPoint;
		}
		//终点点坐标
		public function set endPoint(p:Point):void
		{
			_endPoint = p;
		}
		public function get endPoint():Point
		{
			return _endPoint;
		}
		//虚线 空白长度
		public function set lineSize(num:Number):void
		{
			_lineSize = num;
		}
		public function get lineSize():Number
		{
			return _lineSize;
		}
		//是否显示箭头
		public function set arrowVisible(num:Boolean):void
		{
			arrow.visible = num;
		}
		public function set arrowDoMove(num:Boolean):void
		{
			stopMove();
			_doMove = num;
			arrow.visible = num;
		}
		//是否移动箭头
		public function stopMove():void
		{
			if(null != myMove && myMove.isPlaying)
  			{
  				myMove.stop();	
  			}
		}
		public function get isPlaying():Boolean
		{
			return myMove.isPlaying;
		}
		
		public function get arrowObj():ArrowUI
		{
			return arrow;
		}
	}
}

评论

1 楼 lijunjie2010 2012-05-09  

能把源码上传上来吗？谢谢了，我做了，没有移动的效果。