我刚开始接触HTML5和Canvas元素。 我正在一个项目中创建思维导图,计划使用Canvas元素和JavaScript实现。
我的问题是,如何在Canvas中将形状分组? 我可以将形状和文本绘制到画布上,并可以将它们拖动到画布上,但我想将一个形状和文本元素锁定在一起,以便如果我拖动形状,文本也会随着移动。
有什么想法吗?
先感谢您的帮助。
我刚开始接触HTML5和Canvas元素。 我正在一个项目中创建思维导图,计划使用Canvas元素和JavaScript实现。
我的问题是,如何在Canvas中将形状分组? 我可以将形状和文本绘制到画布上,并可以将它们拖动到画布上,但我想将一个形状和文本元素锁定在一起,以便如果我拖动形状,文本也会随着移动。
有什么想法吗?
先感谢您的帮助。
你可能希望使用SVG而不是画布。
SVG是一个平台,上面可以添加、修改等路径、组等分开的实体。您可以在对象(路径、组或其他)上设置事件处理程序(如onclick
),这使得事件处理通常比画布简单得多。使用SVG更容易创建可重复使用的内容。在Inkscape中绘制某些内容,然后只需复制其生成的SVG并对其进行任何操作即可。
画布只是一个可以绘制的画布;每一帧都需要手动绘制到前一帧的顶部 - 因此,您需要在2D上下文中调用函数来构建每一帧,而不是像<ellipse>
那样。该椭圆没有事件处理程序 - 您需要手动计算鼠标是否位于椭圆上:仅有一个元素;画刷的笔触在画布上不会保持分开。对于思维导图,这将使它更加困难。
SVG还可以轻松导出和可伸缩,这可能是您的目的所在。画布只能给您提供一个位图。
虽然我来晚了一点,但是有一个非常好的库可以让你在HTML5的canvas
元素上进行图层、形状、组甚至事件绑定,它叫做Kinetic.js。
https://github.com/ericdrowell/KineticJS/
我曾经使用这个工具在HTML5画布上成功地创建了一个可拖动的形状和文本组。
如果您能将这两个形状暂时合并为一个,那么您用来拖动形状的任何机制都应该为您完成魔术。但是,如果我不知道您如何表示形状和移动它们的方法,我无法给出更好的建议。