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

Question

所以我刚刚开始使用 HTML5 和 Canvas 元素。我正在做一个项目，我将在其中创建思维导图，我计划使用 Canvas 元素和 java 脚本来完成这项工作。

我的问题是，如何将 Canvas 中的形状组合在一起？我在 Canvas 上绘制形状和文本没有问题，在 Canvas 上拖动它们也没有问题。我想做的是将形状和文本元素锁定在一起，这样如果我拖动形状，文本就会随之而来。

有什么想法吗？

提前致谢。

Answer 1

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

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

• Canvas 只是一 block 用来作画的 Canvas ；您在前一帧之上手动绘制的每个新帧 - 所以不用 <ellipse>您必须在 Canvas 的 2D 上下文中调用函数来构建每一帧。该椭圆没有事件处理程序 - 您需要手动计算鼠标是否位于椭圆上:只有一个元素； Canvas 上画笔的笔触没有分开。对于会使它变得更加困难的思维导图。

SVG 还使导出变得简单且可扩展，这可能是您的目的所需要的。 Canvas 只会给你一张位图。