iT邦幫忙

2

如何拖曳線段讓兩個物件接起來?

想問各位大神如何拖曳其中一個黑色小方塊拉出一條線連到另外一個方塊上呢?
想了3天還是不知道怎麼實作出來?

https://ithelp.ithome.com.tw/upload/images/20190321/20115843Mek0uAAIHl.jpg

css clip-path 用多邊形拉很細 黑底 當作是線 試試看 (我沒做過 但是感覺可行

2 個回答

0
看更多先前的回應...收起先前的回應...
Homura iT邦高手 1 級 ‧ 2019-03-21 14:13:02 檢舉

這是要叫他用Canvas來畫嗎?@@

小馬 iT邦新手 5 級 ‧ 2019-03-21 14:15:41 檢舉

其實我有實作過類似用canvas畫~但是日後我要做到的效果是拖動其中一個物件(DIV)那個線會跟著跑~

那可能要用jsPlumb個人覺得這是目前最符合你需求的做法xd
若簡單來說就是每次你移動就必須將線條擦拭掉在重畫

淺水員 iT邦新手 2 級 ‧ 2019-03-21 15:54:37 檢舉

如果要自己寫的話,感覺 svg 會比 canvas 容易實作。

小馬 iT邦新手 5 級 ‧ 2019-03-21 15:59:26 檢舉

是要自己寫喔~有想過用jsPlumb
但是成品可能會發很多線,去接到每個div~
但如果有兩個物件距離比較遠,又不希望連接線蓋到其他物件~
似乎jsPlumb無法解決這個問題~才想說自己寫看看!!
哈哈~但自己寫似乎以我目前的程度是有點難度!

還是謝謝大家的藥方啊!

我要發表回答

立即登入回答