Flex实现画线（可拖拽、带箭头、可变色）

在前人的基础上改了改，不多说，看效果图，贴代码：

 

 

 

主程序：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				creationComplete="init()" fontSize="12" backgroundColor="#FFFFFF"
				layout="absolute" minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
			import com.njit.LinkLine;
			import com.njit.LinkMap;
			private var point1:Point;
			private var point2:Point;
			private var map1:LinkMap;
			private var map2:LinkMap;
			private var line:LinkLine;
			private var colorArr:Array=["0xFF0000","0x00FF00","0x0000FF","0xFFFF00"];
			private var k:int=0;
			
			private function init():void{
				point1=new Point(50,50);
				point2=new Point(300,300);
				map1=new LinkMap(point1,100,80,"主机",1);
				map2=new LinkMap(point2,100,80,"服务器",2);
				line=new LinkLine();
				line.setStartPoint(new Point(map1.getCenterX(),map1.getCenterY()));
				line.setEndPoint(new Point(map2.getCenterX(),map2.getCenterY()));
				line.setTip("哈哈哈哈");
				line.drawLine();
				map1.setLine(line,true);
				map2.setLine(line,false);
				this.addChild(map1);
				this.addChild(map2);
				this.addChild(line);
				
				var time:Timer = new Timer(1000,100);
				time.addEventListener(TimerEvent.TIMER,doTime);
				time.start();
			}
			//定时器设置颜色线条颜色变换
			private function doTime(event:TimerEvent):void{
				line.setLineColor(colorArr[k++]);
				line.drawLine();
				if(k>=colorArr.length)
					k=0;
			}
		]]>
	</mx:Script>
</mx:Application>

 

线条类：

package com.njit
{
	import flash.geom.Point;
	
	import mx.core.UIComponent;
	
	public class LinkLine extends UIComponent{
		
		//线起点
		private var startPoint:Point;
		//线终点
		private var endPoint:Point;
		//线条颜色
		private var lineColor:uint=0x000000;
		//线提示语
		private var tip:String=" ";
		//是否要箭头
		private var isArrow:Boolean=true;
		//箭头大小
		private var radius:uint=6;
		
		
		public function LinkLine(){
			super();
		}
		
		//获得线的角度
		public function getAngle():Number{
			var tmpx:Number=endPoint.x - startPoint.x;
			var tmpy:Number=startPoint.y - endPoint.y;
			var angle:Number= Math.atan2(tmpy,tmpx)*(180/Math.PI);
			return angle;
		}
		
		//画线
		public function drawLine():void{
			this.graphics.clear();
			this.graphics.lineStyle(2,lineColor);
			this.graphics.moveTo(startPoint.x,startPoint.y);
			this.graphics.lineTo(endPoint.x,endPoint.y);
			this.toolTip=tip;
			if(isArrow){
				var angle:Number = this.getAngle();
				var centerX:Number = endPoint.x - radius * Math.cos(angle*(Math.PI/180));
				var centerY:Number = endPoint.y + radius * Math.sin(angle*(Math.PI/180));
				var topX:Number = endPoint.x;
				var topY:Number = endPoint.y;
				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));
				this.graphics.beginFill(lineColor,1);
				this.graphics.lineStyle(2,lineColor,1);
				this.graphics.moveTo(topX,topY);
				this.graphics.lineTo(leftX,leftY);
				this.graphics.lineTo(centerX,centerY);
				this.graphics.lineTo(rightX,rightY);
				this.graphics.lineTo(topX,topY);
				this.graphics.endFill();
			}
		}
		public function removeLine():void{
			this.graphics.clear();
		}
		
		public function setStartPoint(point:Point):void{
			this.startPoint=point;
		} 
		public function setEndPoint(point:Point):void{
			this.endPoint=point;
		}
		public function setLineColor(color:uint):void{
			this.lineColor=color;
		}
		public function setTip(tip:String):void{
			this.tip=tip;
		}
		public function setArrow(flag:Boolean):void{
			this.isArrow=flag;
		}
	}
}

 

 

节点类：

 

package com.njit
{
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	import mx.containers.Canvas;
	import mx.controls.Image;
	import mx.controls.Label;
	import mx.events.MoveEvent;

	public class LinkMap extends Canvas{
		
		[Embed(source="assets/images/client.png")]
		[Bindable]
		public var c2s:Class;
		
		[Embed(source="assets/images/server.png")]
		[Bindable]
		public var s2c:Class;
		//网元名称
		private var ueName:String = "网元";
		private var lineList:Array =new Array();
		private var lineCount:int = 0;
		private var oldIndex:int = 0;
		private var ueImage:Image=new Image();
		private var ueLabel:Label=new Label();
		
		public function LinkMap(point:Point,width:int,height:int,ueName:String,type:int){
			super();
			this.x=point.x;
			this.y=point.y;
			this.width=width;
			this.height=height;
			this.ueName=ueName;
			this.init(type);
		}
		//初始化
		private function init(type:int):void{
			this.addEventListener(flash.events.MouseEvent.MOUSE_DOWN,dragBegin);
			this.addEventListener(flash.events.MouseEvent.MOUSE_UP,dragEnd);
			this.addEventListener(flash.events.MouseEvent.MOUSE_MOVE,dragIng2);
			this.addEventListener(mx.events.MoveEvent.MOVE,dragIng1);
			this.verticalScrollPolicy = "off";
			this.horizontalScrollPolicy = "off";
			this.initLabel();
			this.addChild(ueLabel);
			this.initUeImage(type);
			this.addChild(ueImage);
		}
		private function initUeImage(flag:int):void{
			switch(flag){
				case 1:
					ueImage.source = c2s;break;
				case 2:
					ueImage.source = s2c;break;
			}
			ueImage.x = 10;
			ueImage.y = 0;
		}
		
		private function initLabel():void{
			ueLabel.text = ueName;
			ueLabel.x = 0;
			ueLabel.y = 60;
			ueLabel.width = 99;
			ueLabel.height = 20;
		}
	
		private function dragIng1(event:MoveEvent):void{
			this.refreshLine();
		}
		private function dragIng2(event:MouseEvent):void{
			this.refreshLine();
		}
		private function refreshLine():void{
			var x:int = this.getCenterX();
			var y:int = this. getCenterY();
			for(var i:int=0;i<lineList.length;i++){				
				var lineFlag:LineFlag = lineList[i];
				var line:LinkLine = lineFlag.getLine();
				var isHeaderLine:Boolean = lineFlag.getFlag();
				if(isHeaderLine){
					line.setStartPoint(new Point(x,y));
				}else{
					line.setEndPoint(new Point(x,y));
				}	
				line.drawLine();
			}	
		}
		
		public function setLine(line:LinkLine,flag:Boolean):void{
			var lineFlag:LineFlag = new LineFlag(line,flag);
			lineList[lineCount] = lineFlag;
			lineCount++;
		}
		
		
		private function dragBegin(event:MouseEvent):void{
			oldIndex = this.parent.getChildIndex(this);
			this.parent.setChildIndex(this,this.parent.numChildren-1);
			this.startDrag(false);		
		}
		private function dragEnd(event:MouseEvent):void{
			this.parent.setChildIndex(this,oldIndex);
			this.stopDrag();		    
		}
		public function getCenterX():int{
			return this.x+30;
		}
		public function getCenterY():int{
			return this.y+30;
		}
	}
}