拖放到Fabric.js画布中 [英] Drag and Drop into Fabric.js canvas

问题描述

如何将项目（例如图像或其他画布中的其他对象）拖放到受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:

<div id="images">
    <img draggable="true" src="http://i.imgur.com/8rmMZI3.jpg" width="250" height="250"></img>
    <img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="252" height="295"></img>
    <img draggable="true" src="http://i.imgur.com/wMU4SFn.jpg" width="238" height="319"></img>
</div>

<div id="canvas-container">
    <canvas id="canvas" width="800" height="600"></canvas>
</div>

JS Breakdown

1。 Fabric.canvas 实例

首先，我们当然需要画布：

JS Breakdown

1. Fabric.canvas instance

First we want our canvas, of course:

var canvas = new fabric.Canvas('c');

2。功能检测（可选）

不确定这是必需的，因为您拥有画布这一事实使浏览器也很可能具有拖放功能。如果您要使用它，可以使用 Modernizr 这样的方式进行操作：

2. Feature Detection (optional)

Not sure this is necessary, since the fact that you have a canvas makes it very likely that the browser has Drag and Drop as well. Were you to use it, you can do so like this, using Modernizr:

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

    // Bind the event listeners for the image elements

    // Bind the event listeners for the canvas
} else {
    // Replace with a fallback to a library solution.
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

3。事件

再次，与下面的源文章不同，源元素和目标元素是不同的（在该示例中，您只需移动 div 在同一个父容器中），所以我没有注意到某些事件是针对要拖动的元素的，但大多数事件都与要放入的元素绑定。

3. Events

Again, unlike the source article I below, the source and target elements are different (in that articles's example, you just move divs around within the same parent container), so I failed to notice that some of the events are meant for the element being dragged, but most are bound to the element into which you are dropping.

注意：从技术上讲，我知道这是一个关于Fabric.js的问题，但这实际上是关于将对象添加到<$ c $中的拖放问题。 c>< canvas> 与Fabric.js，这就是为什么我现在对DnD东西要更深入一些。

NOTE: I know this is technically a question about Fabric.js, but it's really kind of a question about Drag and Drop in the context of adding objects to a <canvas> with Fabric.js, which is why I'm going a bit more in depth about the DnD stuff now.

对于< img>

• dragstart （我在这里添加了一个类来降低不透明度）


• dragend （并删除了

• dragstart (I added a class here to lower the opacity)
• dragend (and removed that class here)

对于＃canvas-container ：

• dragenter （添加了cl并给画布容器添加漂亮的虚线）


• 拖曳此处：您可以在其中设置事件。 dataTransfer.dropEffect 属性显示本机游标类型之一。默认值是'move'，但是我将其设置为'copy'，因为我实际上并未删除< img> 元素（实际上，您可以在小提琴中创建多个 McClures ）。


• 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岩石-原生HTML5拖放


• Modernizr


• Web平台文档> DOM>属性-dropEffect


• Web平台文档> DOM>事件
  
  
  
  • 拖动开始
  
  
  • 拖动
  
  
  • dragenter
  
  
  • 拖动
  
  
  • dragleave
  
  
  • 删除
  
  
  • 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画布中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！