Chinaunix首页 | 论坛 | 博客

xhload3d

首页　| 　博文目录　| 　关于我

xhload3d

  • 博客访问： 939110
  • 博文数量： 110
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 1997
  • 用 户 组： 普通用户
  • 注册时间： 2013-12-15 22:39
个人简介

HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com

文章分类

全部博文（110）

文章存档

2020年（1）

2018年（28）

2017年（21）

2016年（10）

2015年（28）

2014年（19）

2013年（3）

我的朋友
最近访客
推荐博文
电信网络拓扑图自动布局之总线

分类： HTML5

2016-09-05 02:54:24

在前面《电信网络拓扑图自动布局》一文中，我们大体介绍了 电信网络拓扑图自动布局的相关知识，但是都没有深入地描述各种自动布局的用法，我们今天在这边就重点介绍总线的具体实现方案。

在 的连线手册中，有说明可以自定义连线类型，通过 ht.Default.setEdgeType(type, func, mutual) 函数定义，我们今天要描述的总线也是通过这样的方法来实现的。

我们来简单地描述下这个方法，虽然在文档（）中已经描述得很详细了，为了下面的工作能够更好的开展，我这边还是再强调下。

这个函数名是 setEdgeType，顾名思义，它是用来自定义一个 EdgeType 的，那么第一个参数 type 就是用来定义这个 EdgeType 的名称，在 Edge 的样式上设置 edge.type 属性为 type 值，就可以让这条连线使用是我们自定义的 EdgeType。

那么第二个参数呢，就是用来计算连线的走线信息的函数，这个回调函数将会传入四个参数，分别是：edge、gap、graphView、sameSourceWithFirstEdge，其中 edge 就是样式上设置 edge.type 属性为 type 值的连线对象，这个参数是最重要的，通常有这个参数就可以完成格式各样的连线了。其他参数在手册中都描述得很清楚，可以转到手册中阅读，。

那这第三个参数呢，是决定连线是否影响起始或结束节点上的所有连线，这个参数解释起来比较复杂，后续有机会的话，我们再详细说明。

先来看看一个简单的例子，http://www.hightopo.com/guide/guide/plugin/edgetype/examples/example_custom.html。

上图中，可以看到节点间的连线并不是普通的直线，或者简单的折线，而是漂亮的曲线，那么这样的曲线是怎么生成的呢？既然将这个例子放到这边作为案例，那么它一定使用了自定义 EdgeType 的功能，观察图片可以发现曲线其实可以用二次方曲线来表示，所以呢，我们在 setEdgeType 函数的回调中返回的连线走向信息中，将其描述为一条二次方曲线就可以了。说得有些绕，我们来看看代码实现吧。 

	

		
		

			
			

				点击(此处)折叠或打开
			


		


		

			
			
    
				
				
  1. 
					ht.Default.setEdgeType('custom', function(edge, gap, graphView, sameSourceWithFirstEdge){ var sourcePoint = edge.getSourceAgent().getPosition(), 
				
    2. 

				
  2. 
					        targetPoint = edge.getTargetAgent().getPosition(), 
				
    3. 

				
  3. 
					        points = new ht.List(); 
				
    4. 

				
  4. 
					        points.add(sourcePoint); 
				
    5. 

				
  5. 
					        points.add({ 
				
    6. 

				
  6. 
					            x: (sourcePoint.x + targetPoint.x)/2, 
				
    7. 

				
  7. 
					            y: (sourcePoint.y + targetPoint.y)/2 + 300 }); 
				
    8. 

				
  8. 
					        points.add(targetPoint); return { 
				
    9. 

				
  9. 
					        points: points, 
				
    10. 

				
  10. 
					        segments: new ht.List([1, 3]) 
				
    11. 

				
  11. 
					    }; 
				
    12. 

				
  12. 
					});
				
    13.

从代码中可以看出，返回到顶点是连线的起点和终点，还有中间的二次方曲线的控制点，还有设置了顶点的连线方式，就是在 return 中的 segments，1 代表是路径的起点，3 代表的是二次方曲线，这些相关知识点在 HT for Web 的形状手册中描述得很清楚，不懂的可以转到手册详细了解，。

前面的废话太多了，下面就是我们今天的主要内容了，看看如何通过自定义 EdgeType 来实现总线的效果，。

上图就是一个总线的简单例子，所有的节点都通过线条链接黑色的总线，连线的走向都是节点到总线的最短距离。

来讲讲整体的设计思路吧，其实总的来说，就是点的线的垂直点计算问题。那么问题来了，碰到曲线怎么办？其实曲线也是可以微分成线条来处理的，至于这个线段的划分精细度就需要用户来自定义了。

EdgeType 结合 ShapeLayout 实现均匀自动布局：。

但是，像上图所示的椭圆形总线该如何处理呢？对于这种有固定表达式的形状，我们就不需要用曲线分割的方法来做总线布局了，我们完全可以获取到圆或者椭圆上的一点，所以在处理圆和椭圆上，我们获取 Edge 连边节点中线连成线，然后计算出夹角，通过圆或者椭圆的三角函数表示法计算出总线上的一点，这样来构成连线。

在上图中，我们用到了 ShapeLayout 来自动布局和总线相连的节点，让其相对均匀地分布在总线周围，对于 ShapeLayout 的相关设计思路我们在后面的章节中再具体介绍。

那么我们今天的内容就到这里了，对于总线的设计是不是很简单呢，下面附上总线的所有代码，有需要的话，可以直接复制出来，在页面中引入 的核心包 ht.js 后面引入以下代码就可以直接使用总线功能了。代码不多，也就将近 200 行，感兴趣的朋友可以通读一遍，有什么问题，还请不吝赐教。

点击(此处)折叠或打开

  1. ;(function(window, ht) { var getPoint = function(node, outPoint) { var rect = node.getRect(),
  2.             pos = node.getPosition(),
  3.             p = ht.Default.intersectionLineRect(pos, outPoint, rect); if (p) return { x: p[0], y: p[1] }; return pos;
  4.     }; var pointToInsideLine = function(p1, p2, p) { var x1 = p1.x,
  5.            y1 = p1.y,
  6.            x2 = p2.x,
  7.            y2 = p2.y,
  8.            x = p.x,
  9.            y = p.y,
  10.            result = {},
  11.            dx = x2 - x1,
  12.            dy = y2 - y1,
  13.            d = Math.sqrt(dx * dx + dy * dy),
  14.            ca = dx / d, // cosine sa = dy / d, // sine mX = (-x1 + x) * ca + (-y1 + y) * sa;

  16.        result.x = x1 + mX * ca;
  17.        result.y = y1 + mX * sa; if (!isPointInLine(result, p1, p2)) {
  18.            result.x = Math.abs(result.x - p1.x) < Math.abs(result.x - p2.x) ? p1.x : p2.x;
  19.            result.y = Math.abs(result.y - p1.y) < Math.abs(result.y - p2.y) ? p1.y : p2.y;
  20.        }

  22.        dx = x - result.x;
  23.        dy = y - result.y;
  24.        result.z = Math.sqrt(dx * dx + dy * dy); return result;
  25.     }; var isPointInLine = function(p, p1, p2) { return p.x >= Math.min(p1.x, p2.x) &&
  26.             p.x <= Math.max(p1.x, p2.x) &&
  27.             p.y >= Math.min(p1.y, p2.y) &&
  28.             p.y <= Math.max(p1.y, p2.y);
  29.     }; var bezier2 = function(t, p0, p1, p2) { var t1 = 1 - t; return t1*t1*p0 + 2*t*t1*p1 + t*t*p2;
  30.     }; 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;
  31.     }; var distance = function(p1, p2) { var dx = p2.x - p1.x,
  32.             dy = p2.y - p1.y; return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
  33.     }; var getPointWithLength = function(length, p1, p2) { var dis = distance(p1, p2),
  34.             temp = length / dis,
  35.             dx = p2.x - p1.x,
  36.             dy = p2.y - p1.y; return { x: p1.x + dx * temp, y: p1.y + dy * temp };
  37.     }; var getPointInOval = function(l, r, p1, p2) { var a = Math.atan2(p2.y - p1.y, p2.x - p1.x); return { x: l * Math.cos(a) + p1.x, y: r * Math.sin(a) + p1.y };
  38.     };
  39.     ht.Default.setEdgeType('bus', function(edge, gap, graphView, sameSourceWithFirstEdge) { var source = edge.getSourceAgent(),
  40.             target = edge.getTargetAgent(),
  41.             shapeList = ['circle', 'oval'],
  42.             shape, beginNode, endNode; if (shapeList.indexOf(source.s('shape')) >= 0) {
  43.             shape = source.s('shape');
  44.             beginNode = source;
  45.             endNode = target;
  46.         } else if (shapeList.indexOf(target.s('shape')) >= 0) {
  47.             shape = target.s('shape');
  48.             beginNode = target;
  49.             endNode = source;
  50.         } if (shapeList.indexOf(shape) >= 0) { var w = beginNode.getWidth(),
  51.                 h = beginNode.getHeight(),
  52.                 l = Math.max(w, h) / 2,
  53.                 r = Math.min(w, h) / 2; if (shape === 'circle') l = r = Math.min(l, r); var p = getPointInOval(l, r, beginNode.getPosition(), endNode.getPosition()); return {
  54.                 points: new ht.List([ p, getPoint(endNode, p) ]),
  55.                 segments: new ht.List([ 1, 2 ])
  56.             };
  57.         } var segments, points, endPoint; if (source instanceof ht.Shape) {
  58.             segments = source.getSegments();
  59.             points = source.getPoints();
  60.             beginNode = source;
  61.             endPoint = target.getPosition();
  62.             endNode = target;
  63.         } else if (target instanceof ht.Shape) {
  64.             segments = target.getSegments();
  65.             points = target.getPoints();
  66.             beginNode = target;
  67.             endPoint = source.getPosition();
  68.             endNode = source;
  69.         } if (!points) { return {
  70.                 points: new ht.List([
  71.                     getPoint(source, target.getPosition()),
  72.                     getPoint(target, source.getPosition())
  73.                 ]),
  74.                 segments: new ht.List([ 1, 2 ])
  75.             };
  76.         } if (!segments && points) {
  77.             segments = new ht.List();
  78.             points.each(function() { segments.add(2); });
  79.             segments.set(0, 1);
  80.         } var segLen = segments.size(),
  81.             segV, segNextV, beginPoint, j,
  82.             p1, p2, p3, p4, p, tP1, tP2, tRes,
  83.             curveResolution = beginNode.a('edge.curve.resolution') || 50,
  84.             pointsIndex = 0; for (var i = 0; i < segLen - 1; i++) {
  85.             segNextV = segments.get(i + 1); if (segNextV === 1) {
  86.                 pointsIndex++; continue;
  87.             }
  88.                 
  89.             p1 = points.get(pointsIndex++); if (segNextV === 2 || segNextV === 5) {
  90.                 p2 = points.get((segNextV === 5) ? 0 : pointsIndex);
  91.                 p = pointToInsideLine(p1, p2, endPoint); if (!beginPoint || beginPoint.z > p.z)
  92.                     beginPoint = p;
  93.             } else if (segNextV === 3) {
  94.                 p2 = points.get(pointsIndex++);
  95.                 p3 = points.get(pointsIndex);
  96.                 tP2 = { x: p1.x, y: p1.y }; for (j = 1; j <= curveResolution; j++) {
  97.                     tP1 = tP2;
  98.                     tRes = j / curveResolution;
  99.                     tP2 = {
  100.                         x: bezier2(tRes, p1.x, p2.x, p3.x),
  101.                         y: bezier2(tRes, p1.y, p2.y, p3.y),
  102.                     };
  103.                     p = pointToInsideLine(tP1, tP2, endPoint); if (!beginPoint || beginPoint.z > p.z)
  104.                         beginPoint = p;
  105.                 }
  106.             } else if (segNextV === 4) {
  107.                 p2 = points.get(pointsIndex++);
  108.                 p3 = points.get(pointsIndex++);
  109.                 p4 = points.get(pointsIndex);
  110.                 tP2 = { x: p1.x, y: p1.y }; for (j = 1; j <= curveResolution; j++) {
  111.                     tP1 = tP2;
  112.                     tRes = j / curveResolution;
  113.                     tP2 = {
  114.                         x: bezier3(tRes, p1.x, p2.x, p3.x, p4.x),
  115.                         y: bezier3(tRes, p1.y, p2.y, p3.y, p4.y),
  116.                     };
  117.                     p = pointToInsideLine(tP1, tP2, endPoint); if (!beginPoint || beginPoint.z > p.z)
  118.                         beginPoint = p;
  119.                 }
  120.             }
  121.         }
  122.         endPoint = getPoint(endNode, beginPoint); return {
  123.             points: new ht.List([
  124.                 { x: beginPoint.x, y: beginPoint.y },
  125.                 endPoint
  126.             ]),
  127.             segments: new ht.List([ 1, 2 ])
  128.         };
  129.     });
  130. }(window, ht));

阅读(1927) | 评论(0) | 转发(0) |
0

上一篇：数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

下一篇：电信网络拓扑图自动布局之曲线布局

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6