如何在HTML5画布之间进行拖放?

4

我正在尝试弄清楚如何将一张图片从一个画布拖放到另一个画布。假设这些画布是相邻的,是否可能无缝地拖动物体穿过边界?如果不行,那么将一个div拖到画布上方,获取其ID,并通过响应画布上鼠标抬起的位置来放置它是否更好呢?

3个回答

4
在画布上不可以拖动物品。画布是一种非保留模式(或即时模式)图形API。您需要发出绘制命令并获得像素。模拟拖动包括跟踪用户的鼠标移动并选择以使用不同的参数重复清除和重新绘制画布,以使某些子集的像素看起来像一个连贯的物体移动。
与 HTML 或 SVG 相比,这里实际上更改了真正 DOM 对象的位置 / 转换属性,然后观察文档的视觉表示自动更新。
如果您有两个画布并希望从一个画布拖动内容到另一个画布,则应执行以下操作:
1. 在“菜单”画布上按下鼠标时,编程创建一个新画布,大小与对象相同,并(使用绝对 CSS 定位)将其放置在用户单击的项上方。 2. 将该项绘制到该画布上。 3. 跟踪文档上的mousemove 事件,并相对于鼠标更新画布的位置。 4. 当用户在目标画布上释放鼠标时,丢弃(或隐藏)小型“拖动”画布,并使用适当的位置重新绘制包含被拖动内容的主画布。
不过,这里我可能真正要做的是使用 SVG。;)

0

请查看这个答案。它是关于多选拖放的,但可能会有用。


-1
为什么需要两个画布?画布是你的绘图区域,你可以控制它。你为什么需要两个?

基本上是从菜单中拖动缩略图到画布上,即向画布添加某些内容。 - user563313
2
我明白你的意思 - 我可以将菜单作为画布本身的一部分。 - user563313

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接