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

Posted 2023-03-25

【中文标题】Fabric.js 背景仅在更改缩放值后出现

【英文标题】：Fabric.js background appears only after change zoom value

【发布时间】：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

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

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

【参考方案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 什么也没发生。