在HTML5 Canvas中对形状和文本进行分组

Question

所以我刚开始使用HTML5和Canvas元素。我正在开发一个我将创建思维导图的项目，我计划使用Canvas元素和java脚本一起完成。

我的问题是，如何在画布中将形状组合在一起？我没有问题在画布上绘制形状和文本，并且没有问题在画布上拖动它们。我想要做的是锁定一个形状和文本元素，以便如果我拖动形状，文本随之而来。

有什么想法吗？

提前致谢。

Answer 1

您可能希望使用SVG而不是画布。

• SVG是一个可以粘贴路径，组等的板，您可以添加，修改等等，因为它们是独立的实体。然后，您可以在对象（路径，组或其他）上拥有类似onclick处理程序的东西，这使得事件处理通常比canvas更简单。使用SVG也可以轻松制作可重复的内容。在Inkscape中绘制一些东西然后你就可以复制它产生的SVG并用它做任何事情。

• Canvas只是一幅画画;您手动绘制在上一个上面的每个新框架 - 因此，您必须在画布的2D上下文中调用函数来构造每个框架而不是<ellipse>。没有该椭圆的事件处理程序 - 您需要计算鼠标是否手动在椭圆上：只有一个元素;画布上画笔的笔划不是分开的。对于会使情况变得更加困难的思维导图。

SVG还使出口变得容易和可扩展，这可能是您的目的所希望的。 Canvas只会给你一个位图。

Answer 2

我参加派对有点晚了但是fwiw有一个非常好的库让你在HTML5的canvas元素上做层，形状，组甚至事件绑定，称为Kinetic.js

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

我用这个在html5画布上制作了一组可拖动的形状和文字，取得了很大的成功。

Answer 3

如果您可以暂时将这两种形状合并为一种形状，那么无论您使用哪种机制来拖动形状，都应该为您带来魔力。在不知道你如何表示形状以及你用来移动它们的方法的情况下，我无法给你更好的建议。