fabric 实现拖放添加

import { fabric } from 'fabric';

/**
 * 拖放功能
 */
export class DragAndDrop {
    constructor(canvas) {
        // 添加必要元素 img
        $('body').append(`<img src="./assets/111.png" id='img' alt="">`);
        // 绑定拖拽事件
        this.bindDragAndDrop(canvas);
    }

    /**
     * 绑定拖拽事件
     */
    bindDragAndDrop(canvas) {
        // 保存要添加到 canvas 信息
        let temp = {};
        let _self = this;
        // 监听画布 drop 事件
        $('.upper-canvas').on('drop', function (e) {
            // 计算设置位置信息
            // console.log(e.originalEvent);
            let pos = {
                left: e.originalEvent.offsetX - temp['m-offsetX'],
                top: e.originalEvent.offsetY - temp['m-offsetY'],
            };
            switch (temp.type) {
                case 'IMG':
                    _self.addToCanvasEle(canvas, temp, pos);
                    break;
            }
        });
        // 监听全局拖动事件
        $(document).on('drag', function (e) {
            const type = e.target.tagName;
            // console.log(e);
            switch(type) {
                case 'IMG':
                    temp['type'] = type;
                    temp['ele'] = e.target;
                    break;
            }
        });
        $(document).on('mousedown', function (e) {
            // console.log(e);
            // 记录鼠标和图片位置关系
            temp['m-offsetX'] = e.originalEvent.offsetX;
            temp['m-offsetY'] = e.originalEvent.offsetY;
        });
    }

    /**
     * 第二种方法，ele
     * 同步加载会导致画布加载出现卡顿
     * @param canvas
     * @param temp image 信息
     * @param pos 位置信息
     */
    addToCanvasEle(canvas, temp, pos) {
        let img = new fabric.Image(temp.ele, pos);
        canvas.add(img);
        // 设置当前元素选中
        canvas.setActiveObject(img);
    }
}