Question

我正在使用Fabric.js和jQuery UI来拖放场景创建者。当我将图像拖放到Chrome上的画布时，一切正常。但是，当我在Firefox上拖放图像时，它什么也没做，我在控制台中收到以下错误：

TypeError: t is undefined

这是我的代码：

// HTML

<canvas id="scene"></canvas>

// Draggable setup

$('.scene-item').draggable({
    helper: 'clone',
    appendTo: 'body',
    containment: 'window',
    scroll: false,
    zIndex: 9999
});

// Drop Setup

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

canvas.setDimensions({
        width: '800px',
        height: '500px'
    }, {
        cssOnly: true
});
document.getElementById("scene").fabric = canvas;

canvas.on({
    'object:moving': function(e) {
        e.target.opacity = 0.5;
    },
    "object:modified": function(e) {
        e.target.opacity = 1;
    }
});


    $('#scene').droppable({
        drop: function(e, ui) {
            if ($(e.target).attr('id') === 'scene') {
                var pointer = canvas.getPointer();
                fabric.Image.fromURL(ui.draggable[0].currentSrc, function (img) {
                    console.log(img);
                    img.set({
                        left: pointer.x - 20,
                        top: pointer.y - 20,
                        width: 52,
                        height: 52,
                        scale: 0.1
                    });
                    //canvas.clear();
                    canvas.add(img);
                    canvas.renderAll();
                });
            }
        }

    });

有关正在发生的事情的任何想法？

编辑：

我使用常规fabric.js而不是缩小版本，错误是：

TypeError: event is undefined

Answer 1

我弄清楚出了什么问题。我没有将事件传递给getPointer（）函数。

此代码现在可以正常使用：

$('#scene').droppable({
        drop: function(e, ui) {
            if ($(e.target).attr('id') === 'scene') {
                var pointer = canvas.getPointer(e);
                fabric.Image.fromURL(ui.draggable[0].currentSrc, function (img) {
                    img.filters.push(new fabric.Image.filters.Resize({scaleX: 0.2, scaleY: 0.2}));
                    img.set({
                        left: pointer.x - 20,
                        top: pointer.y - 20,
                        width: 52,
                        height: 52
                    });
                    canvas.clear();
                    canvas.add(img);
                    canvas.renderAll();
                });
            }
        }

    });

Fabric.js Image.fromURL无法在Firefox中运行

1 个答案: