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

使用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);}

?