使用Flex开发Activiti流程设计器（六）-节点之间画线条

介绍一下我实现的设计器中节点之间连接线条的方法：

 

首先实现的效果是，节点的上下左右四个中点（锚点），所有到节点的连线都会在这四个点上，两个节点之间的连线按照最短的一条来画线。

 

确定了需要实现的效果，接下来就是实现。给Node类提供得到四个锚点的方法：

 

	public static var TOP_CENTER:Number = 0;
	public static var BOTTOM_CENTER:Number = 1;
	public static var LEFT_CENTER:Number = 2;
	public static var RIGHT_CENTER:Number = 3;
	public static var MID:Number = 4;

 

 

public function getPoint(type:Number , isIn : Boolean = true):Point{
			var p:Point = null;
			switch(type){
				case Node.TOP_CENTER:
					p = new Point(this.x + this.width /2 , this.y);
					break;
				case Node.BOTTOM_CENTER:
					p = new Point(this.x + this.width/2 ,this.y+this.height);
					break;
				case Node.LEFT_CENTER:
					p = new Point(this.x  ,this.y+this.height/2);
					break;
				case Node.RIGHT_CENTER:
					p = new Point(this.x+this.width  ,this.y+this.height/2);
					break;
				case Node.MID:
					p=new Point(this.x + this.width /2 ,this.y+ this.height/2);
					break;
				default:
					p = null;
			}
｝

 Line类中得到节点中最近的两个锚点：

public function convertPonint(ispolyline:Boolean = false):void{
			var tempSp:Point = new Point();
			var tempEp:Point = new Point();
			var tempLength:Number = 0;
			
			var startNodePoint:Number = -1;
			var endNodePoint:Number = -1;
			
			for(var i:Number = 0 ; i < 4 ; i++){
				if(this.startNode == null){
					break;
				}
				var s:Point = this.startNode.getPoint(i);
				for(var j:Number = 0 ; j <4 ; j++){
					if(this.endNode == null){
						break;
					}
					var e:Point = this.endNode.getPoint(j);
					var x:Number = (e.x - s.x) * (e.x - s.x);
					var y:Number = (e.y - s.y) * (e.y - s.y);
					var v:Number = Math.round(Math.sqrt(x+y));
					if(tempLength == 0 || tempLength > v){
						tempLength = v;
						tempSp = s;
						tempEp = e;
						startNodePoint = i;
						endNodePoint = j;
					}
				}
			}
			this.sp = tempSp;
			this.ep = tempEp;
			convertPointWay(startNodePoint,endNodePoint);			
		}

 根据转换后的坐标进行划线。