在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

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