HTML5 将图像从工具栏拖放到画布

HTML5 drag and drop images from a toolbar to a canvas(HTML5 将图像从工具栏拖放到画布)

问题描述

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

I have searched a lot, but I could not find a scenario which is relevant to my need. I want to drag and drop images from a toolbar to a canvas, not from a canvas to another canvas.

请帮助我.提前致谢

推荐答案

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

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

Use jquery-ui to create draggable elements.

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

使用键值对的数据负载加载这些元素.

Load these elements with data payloads which are key-value pairs.

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

In your case this might be an image object that you want drawn on the canvas.

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

将您的画布设置为拖放区:

Set your canvas as a drop zone:

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

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

When you drop the elements on canvas you can read the data (image) and drawImage that image to the 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 的数据有效负载拖放元素:

Here's a nice tutorial on drag-drop elements with data payloads using jquery-ui:

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

这篇关于HTML5 将图像从工具栏拖放到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！