html - 将形状从 HTML5 画布拖放到另一个

Question

考虑有两个画布。我想拖动画布中的形状并将其放到另一个画布上。有可能吗？

感谢理解我的问题。

Answer 1

我可能不理解您的问题，但形状不会在您绘制的任何上下文中吗？

例子：

context1.drawImage(...);
context2.drawImage(...);

简单地改变上下文？

Answer 2

最简单的做法是使用 DOM 代理对象，捕捉鼠标事件，覆盖画布。因为考虑使用库，问题中的代码非常复杂：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

从画布到画布仍然是您需要自己弄清楚的事情，因为用例非常罕见，并且您需要在画布上没有拖动时为对象设置动画。绝对可能，但极其复杂。

Answer 3

这绝对是可能的。不过，这不会特别容易。我会给你基本的想法。您需要自己进行数学计算和实施：

1. 找出源形状边界。
2. 获取该像素数据并使用它在旧的画布元素之上构造一个新的画布元素。您将使用它来处理拖动。
3. 为这个临时画布实现拖动逻辑。
4. 检测目标画布上的“跌落”，找出边界击中它的位置。将目标像素数据替换为可拖动对象上的数据。
5. 摆脱可拖动的画布。

我希望这有帮助！