Html 在画布中拖动对象

Drag objects in canvas

提问by Rigil

Im looking for an easy to use method of assigning drag behavior to multiple objects (images, shapes etc) in canvas. Does anyone have a good way or know of any libraries for dragging objects around? Thanks

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

回答by Zevan

Creating your own mouse events takes a little work - ideally you should either create or use some kind of mini-library. I'm thinking of creating something like this in the near future. Anyway, I created a drag and drop demo on jsFiddle showing how to drag images - you can view it here.

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

You can create draggable images like this:

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

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

Let me know if you have any questions about this. Hope it helps.

如果您对此有任何疑问，请告诉我。希望能帮助到你。

EDIT

编辑

There was a bug when dragging multiple images. Here is a new version.

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

Another thing you might want to check out is easeljsit sort of in the style of AS3... mouseEvents dragging etc...

您可能想查看的另一件事是画架，它有点像 AS3 的风格……mouseEvents 拖动等……

回答by Phrogz

The HTML Canvas—unlike SVG or HTML—uses a non-retained(or immediate) graphics API. This means that when you draw something (like an image) to the canvas no knowledge of that thing remains. The only thing left is pixels on the canvas, blended with all the previous pixels. You can't really drag a subset of pixels; for one thing, the pixels that were 'under' them are gone. What you would have to do is:

HTML Canvas（与 SVG 或 HTML 不同）使用非保留（或直接）图形 API。这意味着当您在画布上绘制某些东西（如图像）时，不会保留该东西的知识。唯一剩下的是画布上的像素，与之前的所有像素混合。你不能真正拖动像素的子集；一方面，它们“下方”的像素消失了。你必须做的是：

1. Track the mousedownevent and see if it's in the 'right' location for dragging. (You'll have to keep track of what images/objects are where and perform mouse hit detection.)
2. As the user drags the mouse, redraw the entire canvas from scratch, drawing the image in a new location each time based on the offset between the current mouse location and the initial mousedown location.

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

Some alternatives that I might suggest:

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

• SVG
• Pure HTML
• Multiple layered canvases, and drag one transparent canvas over another.

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

The HTML Canvas is good for a lot of things. User interaction with "elements" that appear to be distinct (but are not) is not one of those things.

HTML Canvas 有很多用途。用户与看似不同（但并非如此）的“元素”的交互不是其中之一。

Update: Here are some examples showing dragging on the canvas:

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

• http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
• http://www.redsquirrel.com/dave/work/interactivecanvas/
• http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html

• http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
• http://www.redsquirrel.com/dave/work/interactivecanvas/
• http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html

None of these have created a separate library for tracking your shapes for you, however.

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

回答by Abhishek Susarla

KineticJS is one such Javascript Library that u can use exclusively for animations

KineticJS 就是一个这样的 Javascript 库，你可以专门用于动画

Heres the Link html5canvastutorials

这里是链接html5canvastutorials

回答by Joshua Pinter

Canvas and jCanvas

画布和jCanvas

You're definitely gonna want to check out jCanvas. It's a super clean wrapper for Canvas, which kicks open a lot of doors without adding code complexity. It makes things like this a breeze.

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

For example, here's a little sandbox of something close to what you're after, with dragging and redrawing built right in:

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

Drawing an Arrow Between Two Elements.

在两个元素之间绘制一个箭头。

I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality.

我冒险尝试使用 DIV 和 jQuery 做所有事情，但它总是在交互性和质量上有所欠缺。

Hope that helps others, like me.

希望能帮助其他人，比如我。

JP

J.P

回答by LukeG1111

As you create new objects whether they are windows, cards, shapes or images to be draggable, you can store them in an array of "objects currently not selected". When you click on them or select them or start dragging them you can remove them from the array of "objects not selected". This way you can control what can move in the event of a particular mousedown event or mousemove event by checking if it isn't selected. If it is selected it will not be in the "not selected" array and you can move the mouse pointer over other shapes while dragging shapes without them becoming dragged.

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

Creating arrays of objects you would like to drag also helps with hierarchy. Canvas draws the pixels belonging to the foremost object last. So if the objects are in an array you simply switch their instance as in element in the array say from objectArray[20] to objectArray[4] as you iterate through the array and draw the objects stored in the array elements you can change whether other objects are seen on top or behind other objects.

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