在HTML5 Canvas中分組形狀和文本

Question

所以我剛開始使用HTML5和Canvas元素。我正在創建一個項目，在那裏我將創建思維導圖，並計劃使用Canvas元素和Java腳本一起完成此任務。

我的問題是，如何在畫布中組合形狀？我沒有在畫布上繪製形狀和文本的問題，也沒有任何問題在畫布上拖動它們。我想要做的是鎖定說一個形狀和文本元素在一起，這樣如果我拖動形狀，文字就隨之而來。

任何想法？

在此先感謝。

Answer 1

您可能想要使用SVG而不是畫布。

• SVG是一個可以添加，修改等路徑，組等等的板，因爲它們仍然是獨立的實體。然後，您可以在對象（路徑，組或其他）上擁有諸如onclick處理程序之類的東西，這使事件處理通常比畫布更簡單。使用SVG製作可重複的內容也更容易。在Inkscape中繪製一些東西，然後你可以複製它生成的SVG並用它做任何事情。

• 畫布只是一個畫在畫布上;每個新框架都是在前一個框架上手動繪製的 - 因此，您必須調用canvas的2D上下文中的函數來構造每個框架，而不是使用<ellipse>。沒有該橢圓的事件處理程序 - 您需要計算鼠標是否在手動橢圓上：只有一個元素;畫布上畫筆的筆觸不會分開。對於那些會使它更加困難的思維導圖。

SVG也使出口容易和可擴展，這可能是您的目的所需。畫布只會給你一個位圖。

Answer 2

無論您使用什麼機制拖動形狀，都應該爲您做出魔術，如果您可以將這兩種形狀暫時合併爲一個。不知道你是如何表達形狀和你用來移動它們的方法，我無法給你更好的建議。

Answer 3

我有點遲到了，但FWIW有一個非常好的圖書館，它可以讓你做層，形狀，團體，甚至事件綁定HTML5的所謂Kinetic.js

http://www.html5canvastutorials.com/kineticjs/

canvas元素我使用它在html5畫布上創建了一組可拖動的形狀和文本，並取得了巨大成功。