javascript - 在节点之间绘制连接而不重叠节点的算法

Question

我在图中有一系列节点。节点由用户放置在特定位置。保证节点不重叠，并且事实上，它们之间有一个空间缓冲区。这些节点相互连接，并且每条边在特定点处连接到节点。我需要绘制节点之间的边缘，以便边缘:

• (必需)不要与父节点重叠
• (理想情况下)不会重叠任何节点

我不担心边缘交叉。如果有 Javascript 的实现，那就加分了。我无法使用 Javascript 之外的任何库。

Answer 1

一种解决方案可以使用 Bézier Curves :

"A Bézier curve is defined by a set of control points P0 through Pn, where n is called its order (n = 1 for linear, 2 for quadratic, etc.). The first and last control points are always the end points of the curve; however, the intermediate control points (if any) generally do not lie on the curve."

所以基本思想是使用父节点作为中间控制点。您还可以使用边缘的点作为中间控制点以避免边缘重叠。

在 wiki 文章中您可以找到不错的 animations解释一下。

对于 javascript 实现，我查看了以下库:

• jsdraw2d (LGPL 许可证)，具有 nice demo并得到很好的引用。为了提高性能，还使用 ​​HTML5 和 SVG 实现了它 ( jsdraw2dX )。
• jsbezier关于谷歌代码

但是如果您搜索“javascript bezier 库”，您可以找到更多信息。