时间戳

首页 > 解决方案 > 在画布中添加 elem 会删除背景并将其自身呈现在白色画布上

javascript - 在画布中添加 elem 会删除背景并将其自身呈现在白色画布上

问题描述

在画布中添加任何织物 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

标签： javascriptcanvasfabricjs

解决方案

使用setBackgroundImage设置背景图像。

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

推荐阅读