Добавление элемента в канву удаляет фон и отображает себя на белом холсте. - PullRequest
Новая
       16

Добавление элемента в канву удаляет фон и отображает себя на белом холсте.

0 голосов
/ 25 апреля 2019

Добавление любого тканевого js-элемента, такого как текст или любая форма на холсте, удаляет фон, который я ранее установил для моего холста, и объект отображается на белом холсте.Я хочу загрузить объект на холст с фоном.

Я пробовал renderAll () и bind (), но это совсем не помогает.

Здесь c - другой холст и window.canvasеще один, я устанавливаю c в качестве фона window.canvas.Здесь все нормально 

var ctx = window.canvas.getContext("2d");
var background = new Image();
background.src = c.toDataURL("image/png", 1.0);

background.onload = function(){
ctx.drawImage(background,0,0,this.naturalWidth,this.naturalHeight,0,0,window.canvas.width,window.canvas.height);
}

window.canvas.setHeight(c.height);
window.canvas.setWidth(c.width);
window.canvas.renderAll();

Проблема, когда я рисую эту форму или любой другой элемент ткани, он загружается на белый холст, а не на мой старый холст, который является window.canvas с некоторым фоном 

shapCirEl.onclick = function() {
        var cir = new fabric.Circle({
            radius: 60,
            fill: 'red',
            top: 100,
            left: 100
        });
        cir.set({
            borderColor: 'black',
            cornerColor: 'black',
            cornerSize: 6,
            transparentCorners: false,
            hasRotatingPoint: false
        });
        window.canvas.add(cir);
        window.canvas.setActiveObject(cir);
    };

Когда я рисую эту форму или любой другой элемент ткани, он загружается на белый холст, а не на мой старый холст, который является window.canvas с некоторым фоном

1 Ответ

0 голосов
/ 25 апреля 2019

Используйте setBackgroundImage , чтобы установить фоновое изображение. 

var url = c.toDataURL("image/png", 1.0);
window.canvas.setBackgroundImage(url,function(){
  canvas.renderAll();
})
...