HTML5 将图像从工具栏拖放到 Canvas

Question

我搜索了很多，但找不到与我的需求相关的场景。我想将图像从工具栏拖放到 Canvas ，而不是从一个 Canvas 拖放到另一个 Canvas 。

请帮我解决这个问题。提前致谢

Answer 1

演示:http://jsfiddle.net/m1erickson/2Us2S/

使用 jquery-ui 创建可拖动元素。

$("#myToolbarImageElement").draggable();

使用作为键值对的数据负载加载这些元素。

在您的情况下，这可能是您想要在 Canvas 上绘制的图像对象。

$("#myToolbarImageElement").data("image",myImageObject);

将 Canvas 设置为拖放区:

$("#myCanvas").droppable({drop:myDropHandler});

当您将元素放到 Canvas 上时，您可以读取数据(图像)并将该图像绘制到 Canvas 上。

function myDropHandler(e,ui){
    var x = ui.offset.left - $("#myCanvas").offset.left;
    var y = ui.offset.top  - $("#myCanvas").offset.top;
    var image = ui.draggable.data("image");
    // draw on canvas
    drawImage(image,x,y);
}

这是一个关于使用 jquery-ui 拖放元素和数据有效负载的很好的教程:

http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/