如何建立發光的環路

標籤：des   style   blog   http   color   io   os   ar   for   

先看看發光鏈路的運行效果：

在這個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");                    }                }            }        }    });}

 

 

如何建立發光的環路