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

Question

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

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

谢谢！

Answer 1

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

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

基本上，结合FileAPI和KineticJS来实现您想要的效果。