選擇和移動形狀在HTML5

我使用PHP創建一個動態的，互動的網絡圖，JavaScript和任何帆布或SVG選擇和移動形狀在HTML5

然而，用帆布，我不知道如何使每個對象選擇。我不想使用隱藏的畫布，並檢測鼠標是否在一個對象上，因爲我將有很多相交的對象，並且有很多圖層的畫布會混亂。

我對SVG一無所知。

SVG會更好地服務於這個目的嗎？或者什麼是對此的畫布解決方案。

對於一個畫布抽象，看看[fabric.js]（http://kangax.github.com/fabric.js/test/demo） – kangax 2011-06-15 14:05:04

SVG的一個優點是它具有代表圖形中的形狀的具體DOM對象，所以你會自動獲得大量的鼠標事件處理和事件冒泡。

或者，您可以使用EaselJS，它提供了一個非常強大的顯示列表，讓您無需管理隱藏的畫布。

EaselJS

2011-06-13 23:36:51

似乎EaselJS正在嘗試實現很多SVG已經在做的事情。爲什麼我應該使用一個新的插件，而已經有這麼多的SVG支持了？我只是想弄清楚雙方的觀點 – 2011-06-13 23:47:33

你對使用畫布的最終作品有更加豐富的控制。處理圖形豐富的位圖時無需額外開銷。使用SVG，要實現相同的外觀，您可能需要分層繪製多種形狀並使用複雜的漸變。基於畫布的解決方案也可以更具響應性，因爲沒有事件冒泡通過所有SVG的具體元素。 – 2011-06-14 18:10:56

已經有一些建築圖和圖形的項目。你可以試試Raphaël這是基於svg的，所以它應該也是兼容的。

2011-06-13 23:24:52 Zlatev

我聽說過拉斐爾...但我也聽說那裏沒有'通過Raphael接受輸入（如w/html表單），然後反饋到php然後我的數據庫...我需要用戶能夠修改網絡圖和數據回到php ...是這可能與Raphael – 2011-06-13 23:49:19

我想通過「隱藏的畫布」你的意思是我的教程。它仍然可以處理多個對象和多個圖層，您只需要以正確的z順序對它們進行繪製。

當然有更快（但更復雜）的方式。

如果你不想處理它，SVG內置了所有的對象選擇。給拉斐爾一個嘗試，Zlatev建議。如果性能太差（太多的對象），你將不得不切換到畫布，所以它實際上取決於你圖中節點/鏈接的數量。

雖然你必須自己照顧發送數據到你的服務器（不管你喜歡什麼方式）。 SVG/Canvas/Raphael內置的任何東西都不會爲你做到。

2011-06-14 15:08:04

由於節點和鏈接太多，SVG會在什麼時候變慢。比方說，我可能會有數百個節點......會嗎？ – 2011-06-14 17:23:17

回答