在HTML Canvas中绘制线路以绕过形状

Question

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

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

如果有另一个可以很容易地完成这个任务的开关库，或者甚至回到纯粹的vanilla JS实现（如果这是需要的），我会接受这个想法。

Answer 1

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

将这些排水沟想象成您穿过连接导线的导管。

您的水槽中可能会有多个重叠的连接器。

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

或者：

这画布diagraming库是由频繁的StackOverflow贡献者创建，西蒙·萨里斯：

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

或者：

JSPlumb是一种基于JavaScript diagamming库

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