曲线布局

在前面《 电信网络拓扑图自动布局之总线 》一文中，我们重点介绍了自定义 EdgeType 的使用，概括了实现总线效果的设计思路，那么今天话题是基于 HT for Web 的曲线布局（ShapeLayout）。 ShapeLayout 从字面上的意思理解，就是根据曲线路径来布局节点，省去手动布局节点的繁琐操作，还能保证平滑整齐地排布，这是手动调整很难做到的。ShapeLayout 结合前面提到的总线，是最普遍的应用。 http://www.hightopo.com/demo/EdgeType/ShapeLayout-Oval.html 我们先来看看最简单的圆和椭圆是如何实现自动布局的。我们知道在几何学中，圆和椭圆是可以用三角函数老表示，那么我们就可以将圆或者椭圆分成若干份，通过三角函数就可以算出圆或椭圆上的一点，将节点放到计算出来的点的位置，这样就可以达到 自动布局 的效果。具体的核心代码如下： var radians = Math.PI * 2 / nodeCount, w = width / 2, h = height / 2, a = Math.max(w, h), b = Math.min(w, h), x, y, rad, node; if (shape === 'circle') a = b = Math.min(a, b); for (var i = 0; i <