javascript - 在没有重叠节点的情况下在节点之间绘制连接的算法

Question

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

• （必填）不与父节点重叠
• （理想情况下）不会与任何节点重叠

我不担心边缘交叉。如果在 Javascript 中实现了这一点，则可以加分。我无法使用 Javascript 之外的任何库。

Answer 1

如果您熟悉 C# 和 .NET，您可以通过 ILSpy 探索 Microsoft.GLEE 库（说明在此处和此处），甚至理论上将此源保存到 .csproj，使用Script#修改并重新编译为 JavaScript。

Answer 2

一种解决方案可能是使用Bézier Curves：

“贝塞尔曲线由一组控制点 P0 到 Pn 定义，其中 n 称为其阶数（n = 1 表示线性，2 表示二次等）。 第一个和最后一个控制点始终是曲线的端点曲线；但是，中间控制点（如果有）通常不在曲线上。”

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

在 wiki 文章中，您可以找到很好的动画来解释它。

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

• jsdraw2d（LGPL 许可证）带有一个很好的演示和很好的参考。还使用HTML5 和 SVG来实现它以提高性能（jsdraw2dX）。
• 谷歌代码上的jsbezier

但是如果你用谷歌搜索“javascript bezier library”，你可以找到更多。