Fabric.js 背景仅在更改缩放值后出现答案

【问题标题】：Fabric.js background appears only after change zoom valueFabric.js 背景仅在更改缩放值后出现
【发布时间】：2021-11-07 04:54:29
【问题描述】：

我正在尝试使用 Pattern 更改画布背景：

this.canvas.setBackgroundColor(new fabric.Pattern({source: url, repeat: 'repeat'}),
  ()=> {
    this.canvas.renderAll();
  });

我正在使用这样的外部网址：https://cdn.pixabay.com/photo/2016/02/20/02/21/colorful-1211510_960_720.png

画布已创建并正在工作，但除非我对画布进行缩放（放大或缩小），否则背景图像不会出现，因为它会出现背景。

你为什么认为我有这个问题？我做错什么了吗？我该如何解决这种行为？

【问题讨论】：

标签： angular canvas fabricjs fabricjs2

【解决方案1】：

我不知道其中的来龙去脉，但根据backgroundImage :fabric.Image 的文档，图像需要绑定到它所在的画布上。也许通过backgroundColor属性设置模式也是一样的。

backgroundImage :fabric.Image
画布实例的背景图像。由于 2.4.0 图像缓存处于活动状态，请在将图像作为背景，向画布属性添加对画布的引用在。否则图像无法检测到缩放值。作为备选您可以禁用图像对象缓存

这是一个工作示例： https://jsfiddle.net/sunny001/cb4eqjf1/44/

let canvas
let url = "https://cdn.pixabay.com/photo/2016/02/20/02/21/colorful-1211510_960_720.png"

canvas = new fabric.Canvas('canvas-tools');
canvas.setBackgroundColor({
 source: url,
 repeat: 'repeat'
 }, canvas.renderAll.bind(canvas));

【讨论】：

这不起作用。我需要使用新的 fabric.Pattern 作为源并重复（没有这个我有一个错误）。当我使用 bind 什么也没发生。