draw.io

javascript

qpalzm 2022-01-17 14:39:04 ‧ 1806 瀏覽

分享至

小弟使用svg做出新增圖形,想請問draw.io 中新增兩個圖形中間用一條線連結,這條線會自動變化角度,想請問:這是用甚麼技術原理做到的?

ps:目前已有想法不知道是不是在每個圖形中新增節點,並計算兩個圖形的節點距離自動調整,如有誤煩請大大指出。

froce iT邦大師 1 級 ‧ 2022-01-17 14:45:20 檢舉

SVG line、path

qpalzm iT邦研究生 5 級 ‧ 2022-01-17 14:49:16 檢舉

@froce 大大線條的部分已清楚怎麼產生 , 想知道線條甚麼時候會轉彎,不知道這個部分能不能給小弟一點提示

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

idoncys

iT邦研究生 2 級 ‧ 2022-01-17 15:51:42

最佳解答

我以前把控制點的path,一個用 L 直角,一個用 C 圓角

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

qpalzm iT邦研究生 5 級 ‧ 2022-01-17 16:25:40 檢舉

請問大大控制點的位置通常是自己設定嗎?

idoncys iT邦研究生 2 級 ‧ 2022-01-17 16:33:56 檢舉

連接線控制點要自己算,一般隔壁面接線都兩個點,刻意要繞的話可能到四個點,如下圖

qpalzm iT邦研究生 5 級 ‧ 2022-01-17 16:57:02 檢舉

好的謝謝大大~最後想再請教一個問題,連接的線是以最近的距離去做演算嗎?還是有公式可以參考?

idoncys iT邦研究生 2 級 ‧ 2022-01-17 18:08:45 檢舉

10年前寫的最近距離演算,是核心距離還是邊界控制點距離已經忘了,程式有點長,記得大致是上先點中起始物件,然後挑選第二個時判斷靠近滑鼠的物件,該物件先秀出可能的點,並計算path 劃出臨時線,當mouseup 時即可確定線要連接這兩個物件各自的控制點,有個 function 是專門處理兩個物件連接線繪出的,根據控制點編號算出座標然後把線連過去,連的時候要判斷不能直接切入物件內部,要繞邊,並提供連接線控制點以指定節點位置.