使用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);			
		}
 根据转换后的坐标进行划线。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值