绘制线条以在HTML Canvas中围绕形状进行布线

Question

我正在使用KineticJS来构建组织结构图;其中一个主要要求是能够使线条足够智能，不会被它们连接的形状重叠。我有一个算法来检测两个形状之间的最短路径，但我仍然坚持如何围绕任何形状绕过它们。

到目前为止，我提出的最佳解决方案是在线上的每个点使用getIntersection（），以确保没有任何点包含更多的线;但在这样做之后（这本身感觉有点浪费），我仍然不确定绕过障碍物的最佳方式是什么。

如果有另一个可以轻松完成这项任务，或者甚至回到纯粹的vanilla JS实现，如果这就是它需要的话，我愿意接受切换库的想法。

Answer 1

要使用当前的解决方案，您需要在绘制连接器时可以使用的每个形状之间创建垂直和水平“装订线”。

将这些排水沟视为您连接电线的导管。

您的装订线可能会有多个重叠的连接器。

您可以对连接器进行颜色编码，以便用户轻松识别。

可替换地：

这个画布图表库是由频繁的StackOverflow撰稿人Simon Sarris创建的：

http://www.nwoods.com/company/aboutus.htm

可替换地：

JSPlumb是一个基于javascript的diagamming库

http://jsplumbtoolkit.com/jquery/demo.html