在HTML5 Canvas中對形狀和文本進行分組

Question

所以我剛開始使用HTML5和Canvas元素。 我正在開發一個我將創建思維導圖的項目，我計划使用Canvas元素和java腳本一起完成。

我的問題是，如何在畫布中將形狀組合在一起？ 我沒有問題在畫布上繪制形狀和文本，並且沒有問題在畫布上拖動它們。 我想要做的是鎖定一個形狀和文本元素，以便如果我拖動形狀，文本隨之而來。

有任何想法嗎？

提前致謝。

Answer 1

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

• SVG是一個可以粘貼路徑，組等的板，您可以添加，修改等等，因為它們是獨立的實體。 然后，您可以在對象（路徑，組或其他）上使用onclick處理程序，這使得事件處理通常比canvas更簡單。 使用SVG也可以輕松制作可重復的內容。 在Inkscape中繪制一些東西然后你可以復制它生成的SVG並用它做任何事情。

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

SVG還使出口變得容易和可擴展，這可能是您的目的所希望的。 Canvas只會給你一個位圖。

Answer 2

我有點晚了，但是有一個非常好的庫讓你在HTML5的canvas元素Kinetic.js上做圖層，形狀，組甚至事件綁定

https://github.com/ericdrowell/KineticJS/

我用這個在html5畫布上制作了一組可拖動的形狀和文字，取得了巨大的成功。

Answer 3

無論你使用什么機制拖動你的形狀，如果你可以將這兩個形狀暫時合並為一個，那么你應該為你做出魔力。 在不知道你如何表示形狀和你用來移動它們的方法的情況下，我無法給你任何更好的建議。