fabricjs删除backgroundImage

Question

是否可以在以下fabric.Canvas设置中删除backgroundImage :

canvas.setBackgroundImage('img_url',function() { 
    canvas.renderAll();

或者只是回到标准背景？要设置backgroundColor到white不工作.

谢谢你的帮助!问候最大

Answer 1

这是一个renderAll功能片段fabric.Canvas;

...
if (this.backgroundColor) {
    canvasToDrawOn.fillStyle = this.backgroundColor;
    canvasToDrawOn.fillRect(0, 0, this.width, this.height);
}

if (typeof this.backgroundImage === 'object') {
    this._drawBackroundImage(canvasToDrawOn);
}
...

显然,当你这样做时,背景颜色实际上被设置为白色canvas.backgroundColor = white;.但是,既然canvas.backgroundImage它仍然是一个Image物体,它就会被你填充背景的任何颜色所吸引.

因此,当您不希望backgroundImage绘制时,需要将其设置为0.它不工作null,因为typeof this.backgroundImage === 'object'还在评估为true中renderAll,提示backgroundImage要绘制.但它可以使用canvas.backgroundImage = 0;.

例子.

Answer 2

将背景图像设置为null将其删除。

canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas));

您还可以编写这样的函数来清除背景图像和背景颜色，这很方便。

function clearCanvasBackground() {
  if (canvas) {
    canvas.setBackgroundImage(null);
    canvas.setBackgroundColor('');
    canvas.renderAll();
  }
}