14

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

4

3 回答 3

21

既然你问了一个例子，而我自己还没有尝试过，这里是：

示例小提琴

标记

<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实例

首先我们想要我们的画布，当然：

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. 活动

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

注意：我知道这在技术上是关于 Fabric.js 的问题，但在使用 Fabric.js 将对象添加到的上下文中，这确实是关于拖放的问题<canvas>，这就是为什么我要更深入一点现在关于 DnD 的东西。

为了<img>

  • dragstart（我在这里添加了一个类来降低不透明度）
  • dragend（并在此处删除了该课程）

对于#canvas-container：

  • dragenter（添加了一个类来为画布容器提供漂亮的虚线）
  • dragover：您可以在此处设置event.dataTransfer.dropEffect属性以显示其中一种本机光标类型。默认设置在'move'此处，但我将其设置为，'copy'因为我实际上并没有删除<img>元素（实际上在小提琴中你可以，例如创建几个McClures）。
  • dragleave（这里去掉了虚线）
  • drop：此事件的处理程序创建并添加fabric.Image对象（参见小提琴）。
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.");
}

资料来源：

于 2013-06-18T17:14:33.340 回答
18

我经历了@natchiketa 的小提琴，并解决了问题，只需检查这个小提琴..

http://jsfiddle.net/Ahammadalipk/w8kkc/185/

    window.onload = function () {

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

        /* 
        NOTE: the start and end handlers are events for the <img> elements; the rest are bound to 
        the canvas container.
        */

        function handleDragStart(e) {
            [].forEach.call(images, function (img) {
                img.classList.remove('img_dragging');
            });
            this.classList.add('img_dragging');
        }

        function handleDragOver(e) {
            if (e.preventDefault) {
                e.preventDefault(); 
            }

            e.dataTransfer.dropEffect = 'copy';
            return false;
        }

        function handleDragEnter(e) {                
            this.classList.add('over');
        }

        function handleDragLeave(e) {
            this.classList.remove('over'); 
        }

        function handleDrop(e) {               
            if (e.stopPropagation) {
                e.stopPropagation(); // stops the browser from redirecting.
            }

            var img = document.querySelector('#images img.img_dragging');

            var newImage = new fabric.Image(img, {
                width: img.width,
                height: img.height,
                // Set the center of the new object based on the event coordinates relative
                // to the canvas container.
                left: e.layerX,
                top: e.layerY
            });
            newImage.hasControls = newImage.hasBorders = false;
            canvas.add(newImage);

            return false;
        }

        function handleDragEnd(e) {
            // this/e.target is the source node.
            [].forEach.call(images, function (img) {
                img.classList.remove('img_dragging');
            });
        }

        if (Modernizr.draganddrop) {



            var images = document.querySelectorAll('#images img');
            [].forEach.call(images, function (img) {
                img.addEventListener('dragstart', handleDragStart, false);
                img.addEventListener('dragend', handleDragEnd, false);
            });

            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 {

            alert("This browser doesn't support the HTML5 Drag and Drop API.");
        }
    }

谢谢

于 2016-02-04T07:21:18.240 回答
4

好吧，这个问题很老了^^

我已经更新了小提琴，不，它也可以在 Firefox 中使用。

小提琴

function handleDrop(e) {
    // this / e.target is current target element.

    e.preventDefault(); //I've altert this line for FireFox
于 2018-03-16T12:11:05.863 回答