流程图——正交连线的算法的一种简单实现

起源

要用svg做一个流程图类似visio的连线，如下图的

其实有很多库已经实现了流程图，比如 jointjs，gojs，jsplumb 等等。可惜都不是免费的。

分析

如果要做的简单呢，就用贝塞尔曲线就好了，只需要提供起点终点两个点的坐标，就能用简单的算法生成一个svg 的path了。这样算法网上应该找得到。

但是如果要用正交连线来实现，这个复杂度就上升了几个档次。我们来看看正交连线的多个情况：

假设起点往下，目标节点在起始节点的右下方，那么可能存在的情况一共有四种。考虑到目标节点相对起始节点的方位有四种可能，那么所有连线的可能有4*4=16 种，再考虑到起点出发方向也有四种，那么所有的可能性有16 *4 = 64种。也就是说，如果你要用if else 来写，需要写64个分支。

怎么办

当然不必写64个if else ，写程序不就是要抽象出规律嘛！ 将这个连线分成这么几个部分：

那么这个连线规律在哪里？有的情况它转了一个弯，有的情况它又转了两个弯，这个规律太难找了。下图举了两个例子，同样是终点相对于起点在