首页 > 代码库 > 如何创建发光的环路
如何创建发光的环路
先看看发光链路的运行效果：
在这个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"); } } } } });}
如何创建发光的环路
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。