構建與拖動節點

Question

我要填充在瀏覽器上爲可拖動節點的圖形某些用戶數據，與表示用戶的每個節點和邊的圖是它們之間的關係。我想出了一個解決方案（它的工作原理）：我在HTML5畫布上使用可拖動的div（div具有比畫布更大的z-index，因此可見）。畫布然後用於繪製連接div的線條。問題是，每當用戶拖動節點觸發「拖動」事件時，整個畫布都需要清除，所有的邊都需要重繪。這導致閃爍，我認爲這不是最佳解決方案。請注意，我不是一個真正的HTML/CSS專業人員，可能是我的解決方案非常天真。

從你的CSS（3）/ HTML（5）大師，我可以用任何建議。我願意接受各種解決方案，但希望避免使用Flash/[Silver | Moon]光源。作爲一些例子，我非常喜歡Pearltrees接口，但我的需求不是即。我嘗試從他們的頁面源代碼中「讀取」main.js，但它的一個巨大的功能，全部都包含在一行中。

Answer 1

你不有每次繪製時間來清除整個畫布。這只是編碼它的最簡單的方法。

取而代之，您可以跟蹤與移動的節點相關的線條，並通過在背景顏色上繪製線條（如果背景不是純色，則更復雜），然後繪製新隊。

當你已經相交，你需要處理線你會碰到併發症。爲了簡單起見，擦除可以在矩形中完成，然後一些數學將會發現是否與其他線相交，如果是的話，他們也需要重繪。

如果你想獲得真正看中的，你可以在一個更細化的方式重新繪製，但矩形應該是在大多數情況下足夠了。

Answer 2

我從來沒有做過這樣的事情，但如果你可以使用css3，你可以使用hr或div只設置頂部邊框，並調整大小並使用jquery + css3旋轉它。