使用fabric js时需要更改画布背景颜色

Posted 2023-03-24

【中文标题】使用fabric js时需要更改画布背景颜色

【英文标题】：Need to change the canvas background color while using fabric js

【发布时间】：2012-10-21 19:44:11

【问题描述】：

我有一个画布元素，我用它创建了织物对象。现在，我想动态更改背景颜色。以下对我不起作用。

var x;

x = new fabric.Canvas("mycanvas", 
      backgroundColor : "#fff",
      selection: true
   );

x.backgroundColor = "#f00";

背景颜色是白色，不会变成红色。

【问题讨论】：

您在选择属性后尝试过x.renderTop() 或x.renderAll() 吗？

【参考方案1】：

更改属性后需要渲染画布，因为对象的属性只是属性，不被事件处理

http://jsfiddle.net/oceog/gDhht/

var canvas = new fabric.Canvas('c',backgroundColor : "#0ff");
console.log(canvas);
canvas.backgroundColor="red";
canvas.renderTop();
canvas.add(
  new fabric.Rect( top: 100, left: 100, width: 50, height: 50, fill: '#f55' ),
  new fabric.Circle( top: 140, left: 230, radius: 75, fill: 'green' ),
  new fabric.Triangle( top: 300, left: 210, width: 100, height: 100, fill: 'blue' )
);

canvas.backgroundColor="green";
canvas.renderAll();
​

---

更新：我尝试了最新的面料，看来你不再需要 renderAll() 了。

【讨论】：

我使用 canvas.setBackgroundColor 太奇怪了，直到我再次更改颜色才生效。然后我尝试了这个，它奏效了。错误？

see this example (it's not mine) 他们使用 renderAll 来设置颜色，

我知道他们在做什么，有没有一种首选的方式来做这件事，或者因为它们都可以工作，所以有负面影响吗？

我不确定，searching through the source 没有显示该方法的定义，所以我不确定它属于哪种类型的对象。

找到定义here。在我今年前回答的那一刻，它没有 setBackgroundColor