TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

如何创建发光的环路

Posted on 2014-09-16 13:36 TWaver 阅读(2965) 评论(0)  编辑  收藏

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

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

1function 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绘制能力了，核心代码如下：

1cx = 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的类型，并不断刷新。

核心代码如下：

1function 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}

只有注册用户登录后才能发表评论。
网站导航: