如何从一个HTML5画布拖放到另一个 [英] How to drag and drop from one HTML5 canvas to another

问题描述

我想弄清楚如何将图像从一个画布拖放到另一个画布。假设画布彼此相邻，是否可以无缝地拖动一些东西跨越边界？如果不是，是否更好的想法，拖动一个div在画布上，获取它的ID，并通过响应canvasup上的mouseup位置放置它。

解决方案

不要在画布上拖动项目。画布是非保留模式（或 即时模式 ）图形API。你发出绘制命令，你得到像素。模拟拖动包括跟踪用户的鼠标移动并选择用不同的参数重复地清除和重绘画布，以使像素的一些子集看起来像一个粘性对象移动。

与HTML或SVG对比，其中实际更改真实DOM对象的位置/变换属性，并自动更新文档的视觉表示。

如果你有两个画布，并且想从一个拖到另一个，我会做的是：

1. 在鼠标按下菜单画布上，以编程方式创建一个与对象一样大的新画布，（使用绝对CSS定位）将其放置在用户点击的项目之上。
$ b $

2. 跟踪文档上的 mousemove 事件，并更新画布的位置相对于鼠标。


3. 当用户将鼠标放在目标画布上时，丢弃（或隐藏）您的小拖动画布，然后重新绘制主画布




虽然，我可能真正做的是使用SVG。 ;）




I'm trying to figure out how to drag and drop an image from one canvas to another canvas. Assuming the canvases are next to each other, would it be possible to seamlessly drag something across the border? If not, is it a better idea to drag a div over the canvas, get its ID, and place it by responding to the mouseup location on the canvas?

解决方案

You don't drag items on a canvas. A canvas is a non-retained mode (or immediate mode) graphics API. You issue draw commands and you get pixels. Simulating dragging is comprised of tracking the user's mouse movements and choosing to repeatedly clear and re-draw the canvas with different parameters to make some subset of the pixels appear to move as a cohesive object.

Contrast this with HTML or SVG where you actually change position/transform properties of a real DOM object and the watch as the visual representation of your document updates automatically.

If you have two canvases and want to drag something from one to the other, what I would do is:

1. On mouse down on the 'menu' canvas, create a new canvas programmatically just as large as the object, and (using absolute CSS positioning) place it over top of the item the user clicked on.
2. Draw the item onto that canvas.
3. Track the mousemove event on the document, and update the position of the canvas relative to the mouse.
4. When the user releases the mouse over the destination canvas, throw away (or hide) your tiny 'dragging' canvas, and re-draw the main canvas with the item that was dragged in the appropriate location.

Though, what I'd probably really do here is use SVG. ;)

这篇关于如何从一个HTML5画布拖放到另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！