拖放到Fabric.js画布中

问题描述

如何将项目（例如图像或其他画布中的其他对象）拖放到受fabricjs管理的画布中？我发现了很多示例如何在画布中移动项目，但我想将项目从外部元素拖放到画布中。

How can I drop items (like image, or other object from other canvas) into canvas which is managed by fabricjs? I have found many examples how to move items inside canvas but I would like to drag and drop item from outer element into canvas.

推荐答案

自从您问了一个例子以来，我还没有亲自尝试过，所以去了：

Since you asked for an example and I haven't tried it out myself yet, here goes:

此处：您可以在其中设置事件。 dataTransfer.dropEffect 属性显示本机游标类型之一。默认值是'move'，但是我将其设置为'copy'，因为我实际上并未删除< img> 元素（实际上，您可以在小提琴中创建多个）。 
 
  dragleave （在此处删除了虚线） ）
 
 
  drop ：此事件的处理程序创建并添加 fabric.Image 对象（请参见小提琴）。
 
 

dragenter (added a class to give the canvas container that nifty dotted line)
dragover: Here you can set the event.dataTransfer.dropEffect property to show one of the native cursor types. The default would be 'move' here, but I set it to 'copy' since I don't actually remove the <img> element (in fact in the fiddle you can, for example create several McClures).
dragleave (removed the dotted line here)
drop: The handler for this event creates and adds the fabric.Image object (see the fiddle).

if (Modernizr.draganddrop) {
    // Browser supports HTML5 DnD.

    // Bind the event listeners for the image elements
    var images = document.querySelectorAll('#images img');
    [].forEach.call(images, function (img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
    });
    // Bind the event listeners for the canvas
    var canvasContainer = document.getElementById('canvas-container');
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
} else {
    // Replace with a fallback to a library solution.
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}
来源：
 
 
  
 
 
  
 
 
  
 
 
  
 
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
HTML5 Rocks - Native HTML5 Drag and Drop
Modernizr
Web Platform Docs > DOM > Properties - dropEffect
Web Platform Docs > DOM > Events
dragstart
dragend
dragenter
dragover
dragleave
drop
                        
这篇关于拖放到Fabric.js画布中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！