将多个图像从一个画布拖放到html5中的另一画布 [英] drag and drop multiple image from one canvas to another canvas in html5

问题描述

这些天，我遇到了问题.实际上，我是HTML5的新手，如今，我尝试将多个图像从一个画布拖放到另一个画布上，反之亦然.我有旅行多个链接，但无济于事，因为该链接只有一个画布，并且在该画布中拖放.像下面的链接
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape [ ^ ]
但我想要在HTML5中这样
http://www.w3schools.com/html/html5_draganddrop.asp [解决方案

交叉发布
http://stackoverflow.com/Questions/12766757/image-drag-and-drop-from-one-canvas-to-second-canvas-in-html5 [
这就是画布的状况.

但是，如果要自己维护一个列表，以了解在画布上绘制了哪些对象以及在何处绘制了对象，则可以处理画布上的鼠标事件并检查坐标/对象列表，以查看光标是否在它们的上方.然后，您可以选择"对象"并允许拖动到另一个画布.然后，这将从您的第一个画布的列表中删除该对象，重新绘制该画布，然后将其插入要绘制到第二个画布上的对象列表中，然后再更新该画布.

These days i''m suffering from a problem. Actually i''m new in HTML5, and these days i''m try to do drag and drop multiple images from one canvas to another canvas vice-versa. I have travel multiple links but that not help me, because that links have only one canvas and drag and drop within that canvas. like below links
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape[^]
but i want like this in HTML5
http://www.w3schools.com/html/html5_draganddrop.asp[^]

Thanks

解决方案

CROSS-POST
http://stackoverflow.com/questions/12766757/image-drag-and-drop-from-one-canvas-to-second-canvas-in-html5[^]

The short & simple answer is: you can''t.

The qualified answer is: The thing with the canvas element is that it holds a number of different state variables (stroke color, width, fill color, and other assorted styles, positions and transforms) as well as the pixels that it contains. That is to say, it doesn''t keep track of any elements drawn to it.

The html5 drag/drop demo moves html elements around. You could drag and drop the whole canvas, but not the objects that have been drawn to it. Imagine drawing some text in a bitmap editor over a photo background. You can''t just copy the text any more - there is no ''text'' - there is only a series of pixels that are coloured in a way that represents text.

That''s the state of affairs with the canvas.

However, if you were to maintain a list yourself of which objects were drawn to the canvas and where, _then_ you could handle mouse events on the canvas and check your list of coords/objects to see if the cursor is above any of them. You could then ''select'' the ''object'' and allow dragging to another canvas. This would then remove the object from your list for the first canvas, redraw that canvas and then insert it into the list of objects to be drawn onto the second canvas, before updating that canvas too.

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