时间戳

首页 > 解决方案 > Fabric.js 背景仅在更改缩放值后出现

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

问题描述

我正在尝试使用 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

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

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

标签： angularcanvasfabricjsfabricjs2

解决方案

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

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

这是一个工作示例： 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));

推荐阅读