Question

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

Answer 1

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

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

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

如果您对此有任何疑问，请与我们联系。希望它有所帮助。

修改

拖动多张图片时出现错误。 Here is a new version

你可能想要检查的另一件事是easeljs它的风格是AS3 ... mouseEvents拖动等......

Answer 2

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

跟踪mousedown事件，看看它是否位于“正确”位置进行拖动。（您必须跟踪哪些图像/对象在哪里并执行鼠标点击检测。）
当用户拖动鼠标时，从头开始重绘整个画布，每次根据当前鼠标位置和初始mousedown位置之间的偏移量在新位置绘制图像。

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

SVG
纯HTML
多层画布，将一个透明画布拖到另一个上。

HTML Canvas适用于很多方面。用户与看似不同（但不是）的“元素”的互动不是其中之一。

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

然而，这些都没有创建一个单独的库来跟踪你的形状。

Answer 3

KineticJS是一个可以专门用于动画的Javascript库

继承人html5canvastutorials

Answer 4

画布和jCanvas

你肯定想看看jCanvas。它是Canvas的一个超级干净的包装器，可以在不增加代码复杂性的情况下打开很多门。它使这样的事情变得轻而易举。

例如，这里有一个接近您所追求的东西的小沙箱，内置拖动和重绘：

Drawing an Arrow Between Two Elements.

Drawing an arrow

我冒险尝试使用DIV和jQuery，但它总是在交互性和质量方面做得不够。

希望像我一样帮助别人。

JP

Answer 5

在创建新对象时，无论它们是可拖动的窗口，卡片，形状还是图像，都可以将它们存储在“当前未选择的对象”数组中。单击它们或选择它们或开始拖动它们时，可以从“未选择的对象”数组中删除它们。这样，您可以通过检查是否未选中它来控制在发生特定mousedown事件或mousemove事件时可以移动的内容。如果选中它，它将不在“未选中”数组中，您可以将鼠标指针移动到其他形状上，同时拖动形状而不会拖动它们。

创建要拖动的对象数组也有助于层次结构。 Canvas最后绘制属于最前面对象的像素。因此，如果对象在数组中，您只需将其实例切换为数组中的元素，例如从objectArray [20]切换到objectArray [4]，当您遍历数组并绘制存储在数组元素中的对象时，您可以更改其他在其他对象的顶部或后面可以看到对象。

在画布中拖动对象

5 个答案:

画布和jCanvas

Drawing an Arrow Between Two Elements.