如何创建发光的环路

先看看发光链路的运行效果：

在这个Demo中主要包含三个技术点，一是如何在选取一条链路时，让整条回路发光；二是如何绘制带有箭头方向的曲线link；三是如何设置链路的样式，让整体可控。
1.如何获取整条回路的所有link，并使之发光
以前做客户支持，也处理过类似的问题，当时的解决方法是通过获取当前的Link，然后通过不断的遍历，不断获取link的fromNode和toNode，然后再获取Node的Link,从而获取回路中所有的Link和Node。这样实现的缺点是要通过大量的遍历，实现起来比较繁琐，本文的处理方法是，在创建link的时候，设置一个Client属性，在选择回路的时候，直接读取这个Client属性，并遍历一次即可。创建回路代码如下：

1	function createCircuit(nodes, linename, flag) {

2	if (flag) {

3	var startNode = nodes[0];

4	var stopNode = nodes[nodes.length - 1];

5	var link = new CLink(stopNode, startNode);

6	link.setStyle('link.type', "extend.left");

7	//        link.setName(linename);

8	link.setClient('linename', linename);

9	box.add(link);

10

}

11	for (var i = 0; i < nodes.length - 1; i++) {

12	var fromNode = nodes[i];

13	var toNode = nodes[i + 1];

14	var link = new CLink(fromNode, toNode);

15	//        link.setName(linename);

16	link.setClient('linename', linename);

17	if (i == 0) {

18	link.setStyle('link.type', "orthogonal.H.V");//orthogonal\

19	} else if (i == 1) {

20	link.setStyle('link.type', "orthogonal.V.H");//orthogonal\

21	} else if (i == 2) {

22	link.setStyle('link.type', "orthogonal.V.H");//orthogonal\

23

}

24	//       link.setStyle('link.type', "orthogonal");//orthogonal\

25	box.add(link);

26

}

27

}

2.自定义实现带有箭头的曲线link
这个主要考察的是canvas绘制能力了，核心代码如下：

1	cx = cx - Math.cos(angle) * radius;

2	cy = cy - Math.sin(angle) * radius;

3	ctx.lineWidth = 4;

4	ctx.beginPath();

5	ctx.moveTo(p1.x, p1.y - h1 / 2);

6	ctx.quadraticCurveTo(cx, cy, p2.x, p2.y - h2 / 2);

7	ctx.stroke();

8	ctx.closePath();

9	//draw arrow

10	this.drawArrow(ctx, p2.x, p2.y - h2 / 5 * 3, cx, cy+20, 1, 2, Math.PI / 8, 10);

3.设置Link的样式
TWaver的Link支持很多样式，常用的类型可参考下图，本文主要监听mousemove事件，并在拖动Node的过程中不断计算Node之间的相对位置，从而判定Link的类型，并不断刷新。

核心代码如下：

1	function refreshLinkType() {

2	box.forEach(function (element) {

3	if (element instanceof  twaver.Link) {

4	var fromNode = element.getFromNode();

5	var toNode = element.getToNode();

6	var nextLinks = toNode.getLinks();

7	var nextNode;

8	nextLinks.forEach(function (element) {

9	if (element.getToNode() !== toNode) {

10	nextNode = element.getToNode();

11

}

12

});

13	var fromPoint = fromNode.getCenterLocation();

14	var toPoint = toNode.getCenterLocation();

15	var nextPoint;

16	if (nextNode) {

17	nextPoint = nextNode.getCenterLocation();

18

}

19	//compute the relationship of location between fromNode and toNode

20	if (fromPoint.x < toPoint.x && fromPoint.y < toPoint.y) {

21	element.setStyle('link.type', "orthogonal.V.H");

22	} else if (fromPoint.x < toPoint.x && fromPoint.y > toPoint.y) {

23	element.setStyle('link.type', "orthogonal.V.H");

24	} else if (fromPoint.x > toPoint.x && fromPoint.y < toPoint.y) {

25	element.setStyle('link.type', "orthogonal.V.H");

26	} else if (fromPoint.x > toPoint.x && fromPoint.y > toPoint.y) {

27	element.setStyle('link.type', "orthogonal");

28

}

29	if (nextPoint) {

30	if (toPoint.x > fromPoint.x && toPoint.x > nextPoint.x) {

31	if (toPoint.y > fromPoint.y && toPoint.y < nextPoint.y) {

32	element.setStyle('link.type', "orthogonal.H.V");

33

} else {

34	element.setStyle('link.type', "orthogonal.V.H");

35

}

36

}

37

}

38

39

}

40

});

41

}