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

这篇具有很好参考价值的文章主要介绍了Fabric.js 样式不更新怎么办?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文简介

带尬猴,我嗨德育处主任


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

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



是否需要重新绘制

我先举个例子。

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

<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,矩形就会自动检测属性的值的更新。


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

// 省略部分代码

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 从入门到膨胀》


点赞 + 关注 + 收藏 = 学会了 代码仓库文章来源地址https://www.toymoban.com/news/detail-727190.html

到了这里,关于Fabric.js 样式不更新怎么办?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • iOS 17更新失败或无法更新怎么办?8 个解决方法快速解决!

    苹果即将在2023年9月19日发布iOS 17正式版,许多用户也都相当期待随之而来的iOS 17新功能,不过当你准备将iPhone 更新到iOS 17 版本时,可能会发生一些不可预测的iOS 17更新失败或更新卡住的问题,但不用担心,本文将会详细为大家提供8个更新失败的解决方法,帮你解决无法更新

    2024年02月07日
    浏览(41)
  • 升级到 iOS 16 后掉电快?更新后手机发热怎么办?

    在刚刚结束的 WWDC 2022 全球开发者大会上,iOS 16 正式亮相。苹果发布iOS16正式版,不少用户都将系统升级到了最新版本,不过有些小伙伴们发现iOS16更新后似乎手机很容易发烫,电池健康度也从100%直接下降到了97%,那么这是怎么回事呢?怎么解决呢? 就目前的体验来看,已经

    2024年02月09日
    浏览(57)
  • iPhone提示“软件更新失败”下载时出错怎么办?教你解决!

    苹果会定期发布新的iOS版本,用户可以进入设置 - 通用 - 软件更新查看并进行下载更新。 但是,有一些小伙伴在尝试更新iPhone或iPad时,设备会提示错误“软件更新失败,下载时出错”。该怎么办呢? 不用担心,小编将给大家分享一些解决方法,一起来看看吧! 此类更新失败

    2024年02月11日
    浏览(56)
  • 谷歌浏览器自动更新到116,chormedriver库只有114的,怎么办

    参考链接:安装chromedriver 115,对应chrome版本115(经检验,116也可以使用) 解决方案:csdn搜下,谷歌搜下,别人已经解决过的抄就完了。 具体就是下了个参考链接里115版本的chromedriver,就可以了。

    2024年02月12日
    浏览(48)
  • 学了半个月js 感觉一点都不会 ,怎么办?

    前言 结合你的提问的具体情况,我想说如果你不是天才,那仅仅只靠半个月的学习就想掌握js那是绝无可能的,至于你说的感觉一点都不会在我看来是夸大了,极大可能是因为你没有去整合回顾知识,脑里的知识点相当的混乱,没有一个知识地图,就像随便问一个如解释一下

    2023年04月21日
    浏览(45)
  • 前端调试时不改代码但又想打印变量信息怎么办?

    我们都知道, Chrome的控制台可以在调试的时候打断点。程序运行到这的时候会停止 但有时候我们不希望程序断点执行,我们只是想看一些变量的信息。 按照以前的方式,我们只能去修改源码增加打印日志的语句, 这样既浪费时间, 又需要在调试完成后清理掉我们打印的日

    2024年02月08日
    浏览(39)
  • 【免费题库】华为OD机试 - 工号不够用了怎么办?(Java & JS & Python & C & C++)

    哈喽,本题库完全免费,收费是为了防止被爬,大家订阅专栏后可以私信联系退款。感谢支持 3020年,空间通信集团的员工人数突破20亿人,即将遇到现有工号不够用的窘境。 现在,请你负责调研新工号系统。继承历史传统,新的工号系统由小写英文字母(a-z)和数字(0-9)

    2024年04月25日
    浏览(36)
  • 前端常用的一些插件、UI框架、js库,样式库以及官方文档。【持续更新】

    1.1 文档地址 API文档 1.2 安装教程 1.下载安装 2.导入 2.1 文档地址 API文档 2.2 安装教程 1.下载安装 2.导入 3.1 文档地址 API文档 3.2 安装教程 1.下载安装 2.导入 3.安装遇到的问题 1)描述 ① 控制台报错 ② 终端报错 输出的内容都是 \\\"export xxx was not found in \\\'vue\\\' 2)解决 ① 先卸载 ya

    2024年02月03日
    浏览(41)
  • js面包屑,如何制作面包屑,什么是面包屑,又如何去理解面包屑是什么呢,对于不会应该怎么办呢?这篇文章告诉你。

    🙂博主:锅盖哒 🙂文章核心: 带你了解原生js面包屑框架 目录大纲 1.面包屑的概念与框架地址 2.功能框架预览于介绍 框架效果预览: 页面架构代码预览: HTML页面预览:  权限验证介绍 3.面包屑的逻辑  下面就是面包屑逻辑 1.首先从login页面进入拿到渲染左侧列表的值 2

    2024年02月14日
    浏览(43)
  • 工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办

    有这么个场景,后端接口的列表数据没有做分页给我,相当于是直接返回所有的列表数据,比如有100条就返回100,但是前端显示,则需要做成分页,比如10条为一页。 假如你用vue来实现,思路就是将数据切割,然后分批显示。 所以可以使用 computed 计算属性和 v-for 指令来实现

    2024年04月17日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包