Chinaunix首页 | 论坛 | 博客

xhload3d

首页　| 　博文目录　| 　关于我

xhload3d

  • 博客访问： 952038
  • 博文数量： 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-19 01:04:14

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

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

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

点击(此处)折叠或打开

  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. }

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

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

点击(此处)折叠或打开

  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() {};

  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));

 

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

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

下一篇：网络拓扑图上文本的巧妙应用

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

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

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

16024965号-6