javascript - fabricjs 删除背景图片

Question

是否可以在设置后删除背景fabric.Canvas图像：

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'仍然评估为truein renderAll，提示backgroundImage被绘制。不过，它适用于canvas.backgroundImage = 0;。

例子。

Answer 2

嗨，我的FabricJs版本是4.5.1

这两种解决方案都不适合我。因为我在织物类型中使用有角度的FabricJs。

当我检查 FabricJs 源代码时，我找到了解决方案。

我们可以简单地

设置背景图像

有一个空的

Fabric.Image 对象。

这样我们就可以实现删除背景图片的功能。

这是可用于此解决方案的代码片段。

const image = new fabric.Image('');
canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));

Answer 3

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

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

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

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