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

Question

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

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

有任何想法吗？

提前致谢.

Answer 1

您可能想使用 SVG 而不是 canvas。

• SVG 是一个面板，您可以在上面粘贴路径、组等，您可以添加、修改等，因为它们仍然是单独的实体。然后，您可以onclick在对象（路径、组或其他）上拥有诸如处理程序之类的东西，这使得事件处理通常比画布简单得多。使用 SVG 制作可重复的内容也更容易。在 Inkscape 中绘制一些内容，然后您可以复制它生成的 SVG 并对其执行任何操作。

• Canvas 只是一块用来作画的画布；您手动在前一帧之上绘制每个新帧 - 因此<ellipse>您不必调用画布的 2D 上下文上的函数来构造每个帧，而不是使用 。该椭圆没有事件处理程序 - 您需要手动计算鼠标是否位于椭圆上：只有一个元素；画布上画笔的笔触并不分开。对于思维导图来说，这会让事情变得更加困难。

SVG 还使导出变得简单且可扩展，这可能适合您的目的。Canvas 只会给你一个位图。