拖放到 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 故障

1.Fabric.canvas 实例

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

JS Breakdown

1. Fabric.canvas instance

First we want our canvas, of course:

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

2.特征检测(可选)

不确定这是否必要，因为您拥有画布这一事实使得浏览器很可能也具有拖放功能.如果你要使用它，你可以这样做，使用 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.活动

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

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 的问题，但在将对象添加到 <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(添加了一个类来为画布容器提供漂亮的虚线)
• dragover:您可以在此处设置 event.dataTransfer.dropEffect 属性以显示其中一种本机光标类型.默认是 'move' 这里，但我将它设置为 'copy' 因为我实际上并没有删除 <img>元素(其实在fiddle中你可以，例如创建几个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 Rocks - 原生 HTML5 拖放
• Modernizr
• Web 平台文档 > DOM > 属性 - dropEffect
• Web 平台文档 > DOM > 事件
  • 拖动开始
  • dragend
  • dragenter
  • dragover
  • 拖动离开
  • 丢弃

  这篇关于拖放到 Fabric.js 画布中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！