如何创建发光的环路

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

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

function createCircuit(nodes, linename, flag) {
    if (flag) {
        var startNode = nodes[0];
        var stopNode = nodes[nodes.length - 1];
        var link = new CLink(stopNode, startNode);
        link.setStyle('link.type', "extend.left");
//        link.setName(linename);
        link.setClient('linename', linename);
        box.add(link);
    }
    for (var i = 0; i < nodes.length - 1; i++) {
        var fromNode = nodes[i];
        var toNode = nodes[i + 1];
        var link = new CLink(fromNode, toNode);
//        link.setName(linename);
        link.setClient('linename', linename);
        if (i == 0) {
            link.setStyle('link.type', "orthogonal.H.V");//orthogonal
        } else if (i == 1) {
            link.setStyle('link.type', "orthogonal.V.H");//orthogonal
        } else if (i == 2) {
            link.setStyle('link.type', "orthogonal.V.H");//orthogonal
        }
//       link.setStyle('link.type', "orthogonal");//orthogonal
        box.add(link);
    }
}

 

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

cx = cx - Math.cos(angle) * radius;
        cy = cy - Math.sin(angle) * radius;
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y - h1 / 2);
        ctx.quadraticCurveTo(cx, cy, p2.x, p2.y - h2 / 2);
        ctx.stroke();
        ctx.closePath();
       //draw arrow
        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的类型，并不断刷新。

核心代码如下：

function refreshLinkType() {
    box.forEach(function (element) {
        if (element instanceof  twaver.Link) {
            var fromNode = element.getFromNode();
            var toNode = element.getToNode();
            var nextLinks = toNode.getLinks();
            var nextNode;
            nextLinks.forEach(function (element) {
                if (element.getToNode() !== toNode) {
                    nextNode = element.getToNode();
                }
            });
            var fromPoint = fromNode.getCenterLocation();
            var toPoint = toNode.getCenterLocation();
            var nextPoint;
            if (nextNode) {
                nextPoint = nextNode.getCenterLocation();
            }
            //compute the relationship of location between fromNode and toNode
            if (fromPoint.x < toPoint.x && fromPoint.y < toPoint.y) {
                element.setStyle('link.type', "orthogonal.V.H");
            } else if (fromPoint.x < toPoint.x && fromPoint.y > toPoint.y) {
                element.setStyle('link.type', "orthogonal.V.H");
            } else if (fromPoint.x > toPoint.x && fromPoint.y < toPoint.y) {
                element.setStyle('link.type', "orthogonal.V.H");
            } else if (fromPoint.x > toPoint.x && fromPoint.y > toPoint.y) {
                element.setStyle('link.type', "orthogonal");
            }
            if (nextPoint) {
                if (toPoint.x > fromPoint.x && toPoint.x > nextPoint.x) {
                    if (toPoint.y > fromPoint.y && toPoint.y < nextPoint.y) {
                        element.setStyle('link.type', "orthogonal.H.V");
                    } else {
                        element.setStyle('link.type', "orthogonal.V.H");
                    }
                }
            }

        }
    });
}