在画布中拖动对象
我正在寻找一种易于使用的方法，将拖动行为分配给画布中的多个对象（图像、形状等）。有谁有好的方法或知道任何用于拖动对象的库？谢谢
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
创建您自己的鼠标事件需要一些工作 - 理想情况下您应该创建或使用某种迷你库。我正在考虑在不久的将来创建类似的东西。不管怎样，我在 jsFiddle 上创建了一个拖放演示，展示了如何拖动图像 - 您可以在此处查看。
您可以像这样创建可拖动图像：
如果您对此有任何疑问，请告诉我。希望有帮助。
编辑
拖动多个图像时出现错误。 这是一个新版本。
您可能想要检查的另一件事是 easeljs 它有点像 AS3 的风格... mouseEvents 拖动等...
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.
You can create draggable images like this:
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 easeljs it sort of in the style of AS3... mouseEvents dragging etc...
HTML Canvas 与 SVG 或 HTML 不同，使用非保留（或直接）图形 API。这意味着当您在画布上绘制某些内容（例如图像）时，不会保留该内容的知识。唯一剩下的是画布上的像素，与之前的所有像素混合。您无法真正拖动像素的子集；一方面，它们“下方”的像素消失了。您需要做的是：
mousedown事件并查看它是否位于“正确”的拖动位置。 （您必须跟踪图像/对象的位置并执行鼠标点击检测。）我可能建议的一些替代方案：
HTML Canvas 有很多用途。用户与看似不同（但实际上并非如此）的“元素”的交互不是其中之一。
更新：以下是一些显示在画布上拖动的示例：
这些都没有创建一个单独的库来跟踪您的形状然而你。
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:
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.)Some alternatives that I might suggest:
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.
Update: Here are some examples showing dragging on the canvas:
None of these have created a separate library for tracking your shapes for you, however.
KineticJS 就是这样一个 Javascript 库，您可以专门用于动画
这里是链接 html5canvastutorials
KineticJS is one such Javascript Library that u can use exclusively for animations
Heres the Link html5canvastutorials
Canvas 和 jCanvas
你肯定会想看看 jCanvas。它是 Canvas 的一个超级干净的包装器，它在不增加代码复杂性的情况下打开了很多大门。它让这样的事情变得轻而易举。
例如，这里有一个接近您想要的东西的小沙箱，内置了拖动和重绘功能：
在两个元素之间绘制箭头。
我冒险沿着用 DIV 和 jQuery 做所有事情，但它在交互性和质量上总是达不到要求。
希望能帮助其他人，比如我。
太平绅士
Canvas and 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.
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.
Hope that helps others, like me.
JP
当您创建新对象时，无论它们是窗口、卡片、形状还是可拖动的图像，您都可以将它们存储在“当前未选择的对象”数组中。当您单击它们或选择它们或开始拖动它们时，您可以将它们从“未选择的对象”数组中删除。这样，您可以通过检查是否未选择来控制在发生特定 mousedown 事件或 mousemove 事件时可以移动的内容。如果它被选中，它将不会出现在“未选中”数组中，并且您可以在拖动形状时将鼠标指针移动到其他形状上，而不会拖动它们。
创建要拖动的对象数组也有助于层次结构。画布最后绘制属于最前面的对象的像素。因此，如果对象位于数组中，您只需将它们的实例切换为数组中的元素，例如从 objectArray[20] 到 objectArray[4]，当您迭代数组并绘制存储在数组元素中的对象时，您可以更改是否其他物体位于其他物体的顶部或后面。
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.
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.