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

问题描述

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

请帮我解决这个问题。在此先感谢 解决方案

nofollow> http://jsfiddle.net/m1erickson/2Us2S/

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

  $（＃myToolbarImageElement）。draggable（）; 
  

使用键值对的数据有效载荷加载这些元素。

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

  $（＃myToolbarImageElement）。data（image，myImageObject）; 
  

将您的画布设置为放置区域：

  $（ ＃myCanvas）可投放（{降：myDropHandler}）;。 
  

当您将元素放置在画布上时，您可以读取数据（图像）并将图像drawImage帆布。

  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）; 
 //在画布上画画
 drawImage（image，x，y）; 
 
 $ / code $ / pre 
 
 
这里有一个很好的关于使用jquery-ui的数据有效载荷拖放元素的教程：
 
 
 
  http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/  
 
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.

Please help me on this. Thanks in advance
解决方案
Demo:  http://jsfiddle.net/m1erickson/2Us2S/

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);
}
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将图像从工具栏拖放到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！