前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Fabric.js 样式不更新怎么办?

Fabric.js 样式不更新怎么办?

作者头像
德育处主任
发布2023-02-26 19:22:50
2.8K0
发布2023-02-26 19:22:50
举报

本文简介

不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式?

如果你也遇到同样的问题的话,可以尝试使用本文的方法。

是否需要重新绘制

我先举个例子。

代码语言:javascript
复制
<canvas id="c" style="border: 1px solid #ccc;"></canvas>

<script>
let canvas = new fabric.Canvas('c')

// 矩形 - 亮粉色
let rect = new fabric.Rect({
  left: 50,
  top: 30,
  width: 80,
  height: 60,
  fill: 'hotpink'
})

canvas.add(rect)

setTimeout(() => {
  console.log(rect.fill) // 输出 'hotpink'
  rect.fill = 'red'
  console.log(rect.fill) // 输出 'red'

  canvas.renderAll() // 刷新画布
}, 1000)

</script>

在这个例子中,页面运行1秒后,我想通过 rect.fill = 'red' 的方式将画布中的矩形修改成红色。

修改完成后在控制台输出当前矩形的颜色,然后再通过 canvas.renderAll() 的方式刷新画布。

从控制台输出的数据来看,矩形确实是变红了,但从视觉上看画布中的矩形却还是粉色。

其实正确的做法是使用 rect.set('fill', 'red') 去修改矩形颜色,set() 方法会通知画布要刷新样式。

但如果你坚持使用 rect.fill = 'red' 的方式去修改也不是不行,此时需要将矩形的 statefullCache 设置为 true,矩形就会自动检测属性的值的更新。

代码语言:javascript
复制
// 省略部分代码

let rect = new fabric.Rect({
  left: 50,
  top: 30,
  width: 80,
  height: 60,
  fill: 'hotpink',
  statefullCache: true // 自动检测更新
})

canvas.add(rect)

setTimeout(() => {
  console.log(rect.fill) // 输出 'hotpink'
  rect.fill = 'red'
  console.log(rect.fill) // 输出 'red'

  canvas.renderAll()
}, 1000)

但并不是所有情况都适合将 statefullCache 设为 true

官方文档也有介绍到:

statefullCache: Boolean When true, object properties are checked for cache invalidation. In some particular situation you may want this to be disabled ( spray brush, very big, groups) or if your application does not allow you to modify properties for groups child you want to disable it for groups. default to false since 1.7.0

说了这么多,最后我还是推荐通过 set() 方法修改元素的属性。

代码仓库

是否需要重新绘制缓存的副本

推荐阅读

👍《Fabric.js 动态设置字号大小》

👍《Fabric.js 监听元素相交(重叠)》

👍《Fabric.js 限制边框宽度缩放》

👍《Fabric.js 保存自定义属性》

👍《Fabric.js 元素被遮挡的部分也可以操作》

👍《Fabric.js 从入门到膨胀》

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本文简介
  • 是否需要重新绘制
  • 代码仓库
  • 推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档