电信网络拓扑图自动布局之曲线布局

在前面《电信网络拓扑图自动布局之总线》一文中，我们重点介绍了自定义 EdgeType 的使用，概括了实现总线效果的设计思路，那么今天话题是基于 HT for Web 的曲线布局（ShapeLayout）。

ShapeLayout 从字面上的意思理解，就是根据曲线路径来布局节点，省去手动布局节点的繁琐操作，还能保证平滑整齐地排布，这是手动调整很难做到的。ShapeLayout 结合前面提到的总线，是最普遍的应用。

http://www.hightopo.com/demo/EdgeType/ShapeLayout-Oval.html

我们先来看看最简单的圆和椭圆是如何实现自动布局的。我们知道在几何学中，圆和椭圆是可以用三角函数老表示，那么我们就可以将圆或者椭圆分成若干份，通过三角函数就可以算出圆或椭圆上的一点，将节点放到计算出来的点的位置，这样就可以达到自动布局的效果。具体的核心代码如下：

点击(此处)折叠或打开

1. var radians = Math.PI * 2 / nodeCount,
   
2.     w = width / 2,
   
3.     h = height / 2,
   
4.     a = Math.max(w, h),
   
5.     b = Math.min(w, h),
   
6.     x, y, rad, node; if (shape === 'circle') a = b = Math.min(a, b); for (var i = 0; i < nodeCount; i++) {
   
7.     rad = radians * i;
   
8.     x = a * Math.cos(rad) + position.x + offset.x;
   
9.     y = b * Math.sin(rad) + position.y + offset.y;
   
10.     node = this._nodes[i]; if (!node) continue; if (!anim)
    
11.         node.setPosition({ x: x, y: y }); else {
    
12.         anim.action = function(pBegin, pEnd, v) { this.setPosition({
    
13.                 x: pBegin.x + (pEnd.x - pBegin.x) * v,
    
14.                 y: pBegin.y + (pEnd.y - pBegin.y) * v
    
15.             });
    
16.         }.bind(node, node.getPosition(), { x: x, y: y });
    
17.         ht.Default.startAnim(anim);
    
18.     }
    
19. }

当然，会有人会问，对椭圆按照角度平均分成若干份计算出来的位置并不是等距的，没错，确实不是等距的，这这边就简单处理了，如果要弧度等距的话，那这个就真麻烦了，在这边就不做阐述了，也没办法阐述，因为我也不懂。

http://www.hightopo.com/demo/EdgeType/ShapeLayout.html

如上图的例子，节点沿着某条曲线均匀布局，那么这种不是特殊形状的连线组合是怎么实现自动布局的呢？其实也很简单，在前面总线章节中就有提到，将曲线分割若干小线段，每次计算固定长度，当判断落点在某条线段上的时候，就可以将问题转换为求线段上一点的数学问题，和总线一样，曲线的切割精度需要用户来定义，在不同的应用场景中，需求可能不太一样。

点击(此处)折叠或打开

1. preP = beginP; var nodeIndex = 0, indexLength, node; for (; i < pointsCount;) {
   
2.     p = this._calculationPoints[i];
   
3.     indexLength = padding + resolution * nodeIndex; if (p.totalLength < indexLength) {
   
4.         preP = p;
   
5.         i++; continue;
   
6.     }
   
7.     node = this._nodes[nodeIndex++]; if (!node) break;
   
8.     
   
9.     dis = indexLength - preP.totalLength;
   
10.     tP = getPointWithLength(dis, preP.point, p.point);
    
11.     
    
12.     p = {
    
13.         x: tP.x + position.x + offset.x - width / 2,
    
14.         y: tP.y + position.y + offset.y - height / 2 }; if (!anim)
    
15.         node.setPosition(p); else {
    
16.         anim.action = function(pBegin, pEnd, v) { this.setPosition({
    
17.                 x: pBegin.x + (pEnd.x - pBegin.x) * v,
    
18.                 y: pBegin.y + (pEnd.y - pBegin.y) * v
    
19.             });
    
20.         }.bind(node, node.getPosition(), p);
    
21.         ht.Default.startAnim(anim);
    
22.     }
    
23.     
    
24.     preP = {
    
25.         point: tP,
    
26.         distance: dis,
    
27.         totalLength: indexLength
    
28.     };
    
29. }

以上就是非特殊形状的连线组合的核心代码，这也只是代码片段，可能理解起来还是会比较吃力的，那么下面我将贴上源代码，有兴趣的朋友可以帮忙瞅瞅，有什么不妥的，欢迎指出。

点击(此处)折叠或打开

1. ;(function(window, ht) { var distance = function(p1, p2) { var dx = p2.x - p1.x,
   
2.             dy = p2.y - p1.y; return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
   
3.     }; var bezier2 = function(t, p0, p1, p2) { var t1 = 1 - t; return t1*t1*p0 + 2*t*t1*p1 + t*t*p2;
   
4.     }; var bezier3 = function(t, p0, p1, p2, p3 ) { var t1 = 1 - t; return t1*t1*t1*p0 + 3*t1*t1*t*p1 + 3*t1*t*t*p2 + t*t*t*p3;
   
5.     }; var getPointWithLength = function(length, p1, p2) { var dis = distance(p1, p2),
   
6.             temp = length / dis,
   
7.             dx = p2.x - p1.x,
   
8.             dy = p2.y - p1.y; return { x: p1.x + dx * temp, y: p1.y + dy * temp };
   
9.     }; var ShapeLayout = ht.ShapeLayout = function() {};
   
10. 
    
11.     ht.Default.def('ht.ShapeLayout', Object, {
    
12.         ms_fire: 1,
    
13.         ms_ac: ['padding', 'offset', 'shape', 'closePath', 'position', 'width', 'height'],
    
14.         
    
15.         calculationSize: function() { if (!this._points) return; var min = { x: Infinity, y: Infinity},
    
16.                 max = { x: -Infinity, y: -Infinity},
    
17.                 p, len = this._points.length; for (var i = 0; i < len; i++) {
    
18.                 p = this._points[i];
    
19.                 min.x = Math.min(min.x, p.x);
    
20.                 min.y = Math.min(min.y, p.y);
    
21.                 max.x = Math.max(max.x, p.x);
    
22.                 max.y = Math.max(max.y, p.y);
    
23.             } this._width = max.x - min.x; this._height = max.y - min.y; this._position = {
    
24.                 x: min.x + this._width / 2,
    
25.                 y: min.y + this._height / 2 };
    
26.         },
    
27.         
    
28.         _points: null,
    
29.         getPoints: function() { return this._points; },
    
30.         setPoints: function(value) { if (value instanceof Array) this._points = value.slice(0); else if (value instanceof ht.List) this._points = value._as.slice(0); else this._points = null; this.__calcuPoints = !!this._points; this.calculationSize();
    
31.         },
    
32.         
    
33.         _segments: null,
    
34.         getSegments: function() { return this._segments; },
    
35.         setSegments: function(value) { if (value instanceof Array) this._segments = value.slice(0); else if (value instanceof ht.List) this._segments = value._as.slice(0); else this._segments = null; this.__calcuPoints = !!this._segments;
    
36.         },
    
37.         
    
38.         _style: {},
    
39.         s: function() { return this.setStyle.apply(this, arguments);
    
40.         },
    
41.         setStyle: function() { var name = arguments[0],
    
42.                 value = arguments[1]; if (arguments.length === 1) { if (typeof name === 'object'){ for (var n in name) this._style[n] = name[n];
    
43.                 } else return this._style[name];
    
44.             } else this._style[name] = value;
    
45.         },
    
46.         
    
47.         _nodes: null,
    
48.         getNodes: function() { return this._nodes; },
    
49.         setNodes: function(value) { if (value instanceof Array) this._nodes = value.slice(0); else if (value instanceof ht.List) this._nodes = value._as.slice(0); else this._nodes = null;
    
50.         },
    
51.         addNode: function(node) { if (!this._nodes) this._nodes = []; this._nodes.push(node);
    
52.         },
    
53.         
    
54.         _calculationPoints: [],
    
55.         splitPoints: function() { if (!this._points || this._points.length === 0) {
    
56.                 alert('Please set points with setPoints method!'); return;
    
57.             } var points = this._points.slice(0),
    
58.                 segments; if (!this._segments || this._segments.length === 0) {
    
59.                 segments = points.map(function(p, index) { return 2; });
    
60.                 segments[0] = 1;
    
61.             } else {
    
62.                 segments = this._segments.slice(0);
    
63.             } this._calculationPoints.length = 0; var beginPoint = points[0],
    
64.                 preP = {
    
65.                     point: { x: beginPoint.x, y: beginPoint.y },
    
66.                     distance: 0,
    
67.                     totalLength: 0 }; this._calculationPoints.push(preP); var length = segments.length,
    
68.                 pointIndex = 1, seg, p, tP, dis,
    
69.                 p0, p1, p2, p3, j,
    
70.                 curveResolution = this.s('curve.resolution') || 50; var calcuPoints = function(currP) {
    
71.                 dis = distance(preP.point, currP);
    
72.                 p = {
    
73.                     point: { x: currP.x, y: currP.y },
    
74.                     distance: dis,
    
75.                     totalLength: preP.totalLength + dis
    
76.                 }; this._calculationPoints.push(p);
    
77.                 preP = p;
    
78.             }.bind(this); for (var i = 1; i < length; i++) {
    
79.                 seg = segments[i]; if (seg === 1) {
    
80.                     tP = points[pointIndex++];
    
81.                     p = {
    
82.                         point: { x: tP.x, y: tP.y },
    
83.                         distance: 0,
    
84.                         totalLength: preP.totalLength
    
85.                     }; this._calculationPoints.push(p);
    
86.                     preP = p;
    
87.                 } else if (seg === 2) { calcuPoints(points[pointIndex++]); } else if (seg === 3) {
    
88.                     p1 = points[pointIndex++];
    
89.                     p2 = points[pointIndex++];
    
90.                     p0 = preP.point; for (j = 1; j <= curveResolution; j++) {
    
91.                         tP = {
    
92.                             x: bezier2(j / curveResolution, p0.x, p1.x, p2.x),
    
93.                             y: bezier2(j / curveResolution, p0.y, p1.y, p2.y)
    
94.                         };
    
95.                         calcuPoints(tP);
    
96.                     }
    
97.                 } else if (seg === 4) {
    
98.                     p1 = points[pointIndex++];
    
99.                     p2 = points[pointIndex++];
    
100.                     p3 = points[pointIndex++];
     
101.                     p0 = preP.point; for (j = 1; j <= curveResolution; j++) {
     
102.                         tP = {
     
103.                             x: bezier3(j / curveResolution, p0.x, p1.x, p2.x, p3.x),
     
104.                             y: bezier3(j / curveResolution, p0.y, p1.y, p2.y, p3.y)
     
105.                         };
     
106.                         calcuPoints(tP);
     
107.                     }
     
108.                 } else if (seg === 5) {
     
109.                     tP = this._calculationPoints[0].point;
     
110.                     calcuPoints(tP);
     
111.                 }
     
112.             } this._totalLength = preP.totalLength;
     
113.         },
     
114.         
     
115.         layout: function(anim) { if (!this._nodes || this._nodes.length === 0) {
     
116.                 alert('Please set nodes width setNode method!'); return;
     
117.             } var nodeCount = this._nodes.length,
     
118.                 shape = this._shape,
     
119.                 shapeList = ['circle', 'oval'],
     
120.                 offset = this._offset || { x: 0, y: 0 },
     
121.                 position = this._position || { x: 0, y: 0 },
     
122.                 width = this._width || 0,
     
123.                 height = this._height || 0; if (shape && shapeList.indexOf(shape) >= 0) { var radians = Math.PI * 2 / nodeCount,
     
124.                     w = width / 2,
     
125.                     h = height / 2,
     
126.                     a = Math.max(w, h),
     
127.                     b = Math.min(w, h),
     
128.                     x, y, rad, node; if (shape === 'circle') a = b = Math.min(a, b); for (var i = 0; i < nodeCount; i++) {
     
129.                     rad = radians * i;
     
130.                     x = a * Math.cos(rad) + position.x + offset.x;
     
131.                     y = b * Math.sin(rad) + position.y + offset.y;
     
132.                     node = this._nodes[i]; if (!node) continue; if (!anim)
     
133.                         node.setPosition({ x: x, y: y }); else {
     
134.                         anim.action = function(pBegin, pEnd, v) { this.setPosition({
     
135.                                 x: pBegin.x + (pEnd.x - pBegin.x) * v,
     
136.                                 y: pBegin.y + (pEnd.y - pBegin.y) * v
     
137.                             });
     
138.                         }.bind(node, node.getPosition(), { x: x, y: y });
     
139.                         ht.Default.startAnim(anim);
     
140.                     }
     
141.                 } return;
     
142.             } if (!this._calculationPoints || this.__calcuPoints) this.splitPoints(); var padding = this._padding || 0,
     
143.                 length = this._totalLength - 2 * padding,
     
144.                 resolution = length / (nodeCount - (this._closePath ? 0 : 1)),
     
145.                 i = 1, p, preP, beginP, dis,
     
146.                 pointsCount = this._calculationPoints.length; for (; i < pointsCount; i++) {
     
147.                 p = this._calculationPoints[i]; if (p.totalLength < padding) continue;
     
148.                 preP = this._calculationPoints[i - 1];
     
149.                 dis = padding - preP.totalLength;
     
150.                 beginP = {
     
151.                     point: getPointWithLength(dis, preP.point, p.point),
     
152.                     distance: p.distance - dis,
     
153.                     totalLength: padding
     
154.                 }; break;
     
155.             }
     
156.             
     
157.             preP = beginP; var nodeIndex = 0, indexLength, node; for (; i < pointsCount;) {
     
158.                 p = this._calculationPoints[i];
     
159.                 indexLength = padding + resolution * nodeIndex; if (p.totalLength < indexLength) {
     
160.                     preP = p;
     
161.                     i++; continue;
     
162.                 }
     
163.                 node = this._nodes[nodeIndex++]; if (!node) break;
     
164.                 
     
165.                 dis = indexLength - preP.totalLength;
     
166.                 tP = getPointWithLength(dis, preP.point, p.point);
     
167.                 
     
168.                 p = {
     
169.                     x: tP.x + position.x + offset.x - width / 2,
     
170.                     y: tP.y + position.y + offset.y - height / 2 }; if (!anim)
     
171.                     node.setPosition(p); else {
     
172.                     anim.action = function(pBegin, pEnd, v) { this.setPosition({
     
173.                             x: pBegin.x + (pEnd.x - pBegin.x) * v,
     
174.                             y: pBegin.y + (pEnd.y - pBegin.y) * v
     
175.                         });
     
176.                     }.bind(node, node.getPosition(), p);
     
177.                     ht.Default.startAnim(anim);
     
178.                 }
     
179.                 
     
180.                 preP = {
     
181.                     point: tP,
     
182.                     distance: dis,
     
183.                     totalLength: indexLength
     
184.                 };
     
185.             }
     
186.         }
     
187.     });
     
188. }(window, ht));