在画布中拖动对象

Question

我正在寻找一种易于使用的方法,将拖动行为分配给画布中的多个对象(图像,形状等).有没有人有一个好方法或知道任何库拖动对象？谢谢

Answer 1

创建自己的鼠标事件需要一些工作 - 理想情况下,您应该创建或使用某种类型的迷你库.我想在不久的将来创造这样的东西.无论如何,我在jsFiddle上创建了一个拖放演示,展示了如何拖动图像 - 你可以在这里查看它.

你可以像这样创建可拖动的图像:

var myImage = new DragImage(sourcePath, x, y);

如果您对此有任何疑问,请与我们联系.希望能帮助到你.

编辑

拖动多个图像时出现错误.这是一个新版本.

你可能想看看另一件事是easeljs它像是在AS3的风格.mouseEvents拖动等...

是的...我有一个使用offsetX/Y的坏习惯,即使它几乎不能在任何浏览器中工作....只需将其更改为clientX和clientY,它应该解决问题:http://jsfiddle.net/QZejF/ 10 /如果你需要将画布放在舞台左上角以外的地方 - 你需要做更多的代码,如果你需要我可以发布 - 让我知道. (2认同)

Answer 2

HTML Canvas(与SVG或HTML不同)使用非保留(或即时)图形API.这意味着当你在画布上绘制某些东西(如图像)时,对该东西的了解仍然存在.唯一剩下的就是画布上的像素,与之前的所有像素混合在一起.你无法真正拖动像素子集; 一方面,"在它们之下"的像素消失了.你需要做的是:

我可能建议的一些替代方案:

HTML Canvas适用于很多方面.用户与看似不同(但不是)的"元素"的交互不是其中之一.

更新:以下是一些显示在画布上拖动的示例:

但是,这些都没有创建一个单独的库来跟踪您的形状.