使用以下代码,我创建了一个Fabric Canvas

canvas = new fabric.Canvas('canvas');
canvas.setWidth(660);
canvas.setHeight(590);

fabric.Image.fromURL('assets/img/materials/marble.bmp', function(image) {
    image.set({
        // I need this because the image size and the canvas size could be different
        // in this way the image always covers the canvas
        width:660,
        height:590
    });

    canvas.setBackgroundImage(image);
});

canvas.renderAll();

Canvas 已创建,但是除非在 Canvas 内部单击,否则不会显示背景图像,因为在 Canvas 内部单击时会显示背景。

我正在本地计算机上工作,该应用程序将不会在线发布。

您为什么认为我遇到了这个问题?我做错什么了吗?我该如何解决此问题?

最佳答案

fabric.image.fromURL是异步的。
如果要尽快显示backgroundimage,则必须在回调内调用renderAll()。

否则,在加载完成后,您的鼠标单击将触发renderAll几分之一秒,并且背景将被渲染。

canvas = new fabric.Canvas('canvas');
canvas.setWidth(660);
canvas.setHeight(590);

    fabric.Image.fromURL('assets/img/materials/marble.bmp', function(image) {
        image.set({
            // I need this because the image size and the canvas size could be different
            // in this way the image always covers the canvas
            width:660,
            height:590
        });

        canvas.setBackgroundImage(image);
        canvas.renderAll();
    });

关于javascript - Fabric.js背景仅在单击后出现,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35242410/

10-12 12:51
查看更多