在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