Блог

Я настраиваю холст с идентификатором 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);
});
 

Когда я нажимаю на изображение, мое нарисованное фоновое изображение полностью очищается. Как я могу это исправить? Мой код теперь также не может отображать несколько импортированных изображений? Как я могу сохранить загруженное фоновое изображение и управлять импортированными изображениями, как если бы они были слоями на фоне?

Почему вы создаете новый экземпляр fabric и устанавливаете фон при каждом вызове? insertImage

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

вызовите его один раз, а затем добавляйте новые изображения только с insertImage помощью функции.