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

Question

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

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

我并不担心边缘过境。如果在Javascript中有这样的实现，则奖励积分。我无法在Javascript之外使用任何库。

Answer 1

如果您熟悉C＃和.NET，可以通过ILSpy探索Microsoft.GLEE库（描述为here和here），甚至理论上将此源保存到.csproj，修改和重新编译它与JavaScript Script#。

Answer 2

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

  

“Bézier曲线由一组控制点P0到Pn定义，   其中n称为其顺序（n = 1表示线性，2表示二次等）。   第一个和最后一个控制点始终是结束点   曲线;但是，中间控制点（如果有的话）通常会这样做   不要躺在曲线上。“

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

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

对于 javascript实现，我看了下面的libs：

• jsdraw2d（LGPL许可证），nice demo并且引用得很好。使用 HTML5和SVG 实现了性能（jsdraw2dX）。
谷歌代码
• jsbezier

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