fabricjs删除背景图片

fabricjs delete backgroundImage

本文关键字：背景图片 删除 fabricjs      更新时间：2023-09-26

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

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

或者只是回到标准背景?设置backgroundColor为white无效

谢谢你的帮助!问候马克斯

这是fabric.Canvas的renderAll函数的一个片段;

...
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'在renderAll中仍然计算为true，提示backgroundImage被绘制。但它可以与canvas.backgroundImage = 0;一起使用。

。

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

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

你也可以写一个这样的函数来清除背景图像和背景颜色，这很方便。

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

嗨我 FabricJs 版本是 4.5.1

两种解决方案都不适合我。因为我使用FabricJs在角与织物类型。

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

我们可以简单地

setBackgroundImage

带有空

织物。图像对象。

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

下面是可用于此解决方案的代码片段:

const image = new fabric.Image('');
canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
相关文章：