Fabric.js?樣式不更新解決方法案例

更新時間：2023年02月14日 08:46:42 作者：德育處主任

這篇文章主要為大家介紹了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() 的方式刷新畫布。

從控制臺輸出的數(shù)據(jù)來看，矩形確實是變紅了，但從視覺上看畫布中的矩形卻還是粉色。

其實正確的做法是使用 rect.set('fill', 'red') 去修改矩形顏色，set() 方法會通知畫布要刷新樣式。

但如果你堅持使用 rect.fill = 'red' 的方式去修改也不是不行，此時需要將矩形的 statefullCache 設置為 true，矩形就會自動檢測屬性的值的更新。

// 省略部分代碼
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() 方法修改元素的屬性。