HTML5：用於在畫布上拖放的框架/庫

Question

我正在尋找一個框架/庫，使我能夠在HTML5-Canvas上執行多個任務。

我需要的是在繪制對象后訪問對象的機制，以便可以將它們更改並解析為XML。 此外，我需要能夠使用光標拖放某些對象。

我已經嘗試了幾個框架，但沒有一個框架可以將onDrag-Listeners分配給對象（僅限於畫布）。 有可能手工實現這種行為，但由於我不得不在畫布上處理多個對象，因此這種行為變得復雜。 此外，性能是一個重要的標准，因此如果我可以使用優化的庫函數而不是我自己的悲慘代碼，那將是一件好事。 我知道SVG是另一種選擇，所以請不要試圖用這種方式推動我。 我需要用畫布來比較兩者的表現。

所以我認為，我正在尋找的是一個框架，讓我將監聽器分配給畫布對象。 動畫技能並不重要，因為所有內容都集中在鼠標的用戶輸入上。

有誰知道這樣的框架/庫符合我的需求並可以分享一些經驗？ 我很高興不被迫在那里測試HTML5-Canvas的所有框架和庫。

提前致謝。

編輯：有一件事我忘了提到：除了幾何對象，我還需要能夠繪制路徑（即塗鴉）並解析它們。 雖然沒有必要為他們提供處理程序，但如果我不必在庫外部實現這一點，我會很高興。

Answer 1

一個很棒的庫，可以通過拖放，調整大小，旋轉來模擬對象。 它還可以導入SVG數據，可以幫助您導入矢量圖形。

該庫名為fabric.js： https ： //github.com/kangax/fabric.js

您可以看到一些演示並感受它如何適合您： http ： //kangax.github.com/fabric.js/demos/index.html

Answer 2

除了您自己用自定義類描述的任何東西之外，沒有真正可以選擇的“畫布對象”之類的東西。 一旦你繪制了它的東西，瀏覽器就會把它看作一個大的像素集合。

您可以執行所描述的唯一方法是捕獲鼠標事件的坐標，並將其與您知道已繪制到畫布的所有內容進行比較，同時考慮它們的繪制順序。

Answer 3

要更改畫布，您需要清除它並重繪。 通常每一幀。 cake.js讓這很容易。

解決方案A）要進行鼠標交互，您需要保留一組對象和z索引，然后在用戶單擊時，確定clickX和offsetY以進行單擊，並確定它們點擊了什么。

解決方案B）使用z-index添加絕對定位的div並定位鏡像您在底層畫布上繪制的圖像。 從這些div中獲取單擊/拖動事件。

Answer 4

我沒有一個庫可供建議，但我使用的一種技術是在畫布上添加一個不可見的圖像映射 。 然后我添加了與畫布上的對象相對應的area元素。

區域標簽會對瀏覽器的所有本機鼠標事件做出反應。 這可以讓您提供豐富的用戶交互。 每個移動和桌面瀏覽器也支持圖像映射，並且其性能優於javascript中實現的任何多邊形算法。

確保imagemap中的area元素始終與畫布中顯示的對象對齊確實會增加一些代碼復雜性，但實際上它並不難解決。 請注意，在Chrome中，如果要更改已在DOM中的area標記的坐標，則可能會遇到一些問題 。

這是這個技術的一個工作示例： http ： //xavi.co/drag-shapes
這是代碼： https ： //github.com/Xavi-/Drag-Shapes

希望這有幫助。

Answer 5

我使用kinetic.js在畫布上綁定框和碰撞。

可能你必須自己設置一些課程。 http://www.kineticjs.com/