Question

使用以下设置后，是否可以在fabric.Canvas中删除backgroundImage：

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

或者回到标准背景？将backgroundColor设置为white无效。

感谢您的帮助！问候Max

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;。

<强> Example 即可。

Answer 2

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

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

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

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

Answer 3

嗨，我的 FabricJs 版本是 4.5.1

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

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

我们可以简单地

<块引用>

设置背景图像

有空

<块引用>

Fabric.Image 对象。

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

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

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

fabricjs删除backgroundImage

3 个答案: