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

Question

12

我刚开始接触HTML5和Canvas元素。我正在一个项目中创建思维导图，计划使用Canvas元素和JavaScript实现。

我的问题是，如何在Canvas中将形状分组？我可以将形状和文本绘制到画布上，并可以将它们拖动到画布上，但我想将一个形状和文本元素锁定在一起，以便如果我拖动形状，文本也会随着移动。

有什么想法吗？

先感谢您的帮助。

- Adam Holmes

你至少尝试过编码吗？如果是的话，请发布代码，因为你的问题对我来说有点困惑。无论如何，我会为你的问题点赞以获得一个好答案 :) - user372551

好的，这是我正在处理的页面：http://www.adam-holmes.co.uk/mindmaps/test2/temp.php如果你查看“scripts.js”文件，你应该能够理解我所做的事情。附言：感谢您的点赞 :) - Adam Holmes

谢谢 :) 我从各个地方取了一些代码，并加入了自己的部分。花了两天的时间… - Adam Holmes

2

这是有趣的代码，但我有几个快速建议。只有在必要时才进行绘制，设置拖动开始时的间隔，完成拖动后关闭它，创建新画布项目后调用一次绘制。在拖动开始时设置on mousemove函数，这样当鼠标悬停在画布上时就不会不断调用该函数了。 - Nick Larsen

谢谢您的建议，我会在有机会的时候进行更改。我现在已经重新启动了这个项目，使用Raphael似乎比我之前使用的原始方法要容易得多。 - Adam Holmes

你可以使用像Fabric.js这样的画布库来实现对象分组（以及对对象进行操作而不是低级命令）。 - kangax

3个回答

1

虽然我来晚了一点，但是有一个非常好的库可以让你在HTML5的canvas元素上进行图层、形状、组甚至事件绑定，它叫做Kinetic.js。

我曾经使用这个工具在HTML5画布上成功地创建了一个可拖动的形状和文本组。

- tmaximini

-1

如果您能将这两个形状暂时合并为一个，那么您用来拖动形状的任何机制都应该为您完成魔术。但是，如果我不知道您如何表示形状和移动它们的方法，我无法给出更好的建议。

- Nick Larsen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Morgan · Accepted Answer

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

SVG是一个平台，上面可以添加、修改等路径、组等分开的实体。您可以在对象（路径、组或其他）上设置事件处理程序（如onclick），这使得事件处理通常比画布简单得多。使用SVG更容易创建可重复使用的内容。在Inkscape中绘制某些内容，然后只需复制其生成的SVG并对其进行任何操作即可。
画布只是一个可以绘制的画布；每一帧都需要手动绘制到前一帧的顶部 - 因此，您需要在2D上下文中调用函数来构建每一帧，而不是像<ellipse>那样。该椭圆没有事件处理程序 - 您需要手动计算鼠标是否位于椭圆上：仅有一个元素；画刷的笔触在画布上不会保持分开。对于思维导图，这将使它更加困难。

SVG还可以轻松导出和可伸缩，这可能是您的目的所在。画布只能给您提供一个位图。