【问题标题】:Need to change the canvas background color while using fabric js使用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() 吗?

标签: javascript html5-canvas fabricjs


【解决方案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
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-16
  • 2018-11-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多