[置顶] 电信网络拓扑图自动布局之曲线布局

在前面《电信网络拓扑图自动布局之总线》一文中，我们重点介绍了自定义 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 < nodeCount; i++) {
    rad = radians * i;
    x = a * Math.cos(rad) + position.x + offset.x;
    y = b * Math.sin(rad) + position.y + offset.y;
    node = this._nodes[i];
    if (!node) continue;
    if (!anim)
        node.setPosition({ x: x, y: y });
    else {
        anim.action = function(pBegin, pEnd, v) {
            this.setPosition({
                x: pBegin.x + (pEnd.x - pBegin.x) * v,
                y: pBegin.y + (pEnd.y - pBegin.y) * v
            });
        }.bind(node, node.getPosition(), { x: x, y: y });
        ht.Default.startAnim(anim);
    }
}

 

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

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

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