将图像拖放到画布可放置区域

Posted 2023-03-05

【中文标题】将图像拖放到画布可放置区域

【英文标题】：drag and drop image into canvas droppable area

【发布时间】：2012-12-25 12:16:32

【问题描述】：

我想知道是否有人可以从概念上引导我完成这个？我想使用 kineticjs 将图像从桌面拖放到浏览器画布中。但是，我只想使部分画布“可放置”。

例如，如果我有一个宽度：600、高度：400 的画布，并且其中有一个 80x80 的正方形，那么我如何才能使 80x80 的正方形可放置？这样只有当我将图像拖到该正方形上时，我才能将图像从桌面拖放到其中？

谢谢！

【问题讨论】：

你真的应该接受一些答案。我们都喜欢在这个网站上帮助人们，所以很高兴接受答案，以便未来有相同问题的用户可以看到所选的解决方案。获得代表也很高兴感谢您花时间回答您的问题。

你能把你现有的代码放在一个 jsfiddle 里玩吗？

【参考方案1】：

您确实应该首先尝试搜索有关如何将内容从桌面拖放到浏览器和画布中的教程。

http://robertnyman.com/2011/03/10/using-html5-canvas-drag-and-drop-and-file-api-to-offer-the-cure/

本质上是结合 FileAPI 和 KineticJS 来实现你想要的效果。