Question

我设置了一个标识为edit-canvas的画布。首先，我上传一个背景图像并在该画布上渲染它。现在我想使用Fabricjs导入我可以操作的其他图像（缩放，拖动...）。我有这样的功能，以便在进一步操作之前每次点击它们时导入图像：

function insertImage(src){
    var canvas=new fabric.Canvas('edit-canvas');
    canvas.setBackgroundImage(url,canvas.renderAll.bind(canvas));
    fabric.Image.fromURL(src, function (img) {
        var oImg = img.set({left:0,top: 0});
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
    });
}

$('#sticker-tool .sticker-selection img').click(function(){
                    insertImage(this.src);
});

当我点击图像时，我绘制的背景图像被完全清除。我该如何解决？我的代码现在也无法渲染多个导入的图像？如何保持上传的背景图像并控制导入的图像，就好像它们是背景图层一样？

Answer 1

为什么每次拨打insertImage时都会创建新的结构实例并设置背景？

var canvas=new fabric.Canvas('edit-canvas'); canvas.setBackgroundImage(url,canvas.renderAll.bind(canvas));

调用一次，然后仅使用insertImage函数添加新图像。

将布料图像插入画布

1 个答案: