drag-and-drop - 拖放到 Fabric.js Canvas 中

Question

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

Answer 1

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

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.");
        }
    }

谢谢