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

Posted 2023-03-24

【中文标题】在 HTML Canvas 中绘制线条以围绕形状进行路由

【英文标题】：Draw line to route around shapes in HTML Canvas

【发布时间】：2013-07-31 04:09:16

【问题描述】：

我正在使用 KineticJS 构建组织结构图；主要要求之一是能够拥有足够智能的线条，不会被它们连接的形状重叠。我有一种算法可以检测两个形状之间的最短路径，但我仍然不知道如何将它们围绕任何形状路由。

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

如果有另一个可以轻松完成此任务的库，我对切换库的想法持开放态度，或者如果需要的话，甚至可以回到纯原生 JS 实现。

【参考方案1】：

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

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

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

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

或者：

这个画布图表库是由 *** 的频繁贡献者 Simon Sarris 创建的：

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

或者：

JSPlumb 是一个基于 javascript 的 diagamming 库

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

【讨论】：

Hmm...GoJS 似乎完全符合我的要求，但它不是开源的。真可惜，因为这是我公司正在寻找的东西。同时，JSPlumb 也不错，但我没有看到任何迹象表明它包含智能线路路由，这是有问题的。我已经考虑过排水沟解决方案，这似乎是合乎逻辑的；你认为让线路穿过它们的最佳方式是什么？