本文簡介

不知道你有沒有遇到過在使用 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>

在這個例子中，頁面運(yùn)行1秒后，我想通過 rect.fill = 'red' 的方式將畫布中的矩形修改成紅色。

修改完成后在控制臺輸出當(dāng)前矩形的顏色，然后再通過 canvas.renderAll() 的方式刷新畫布。

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

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

但如果你堅持使用 rect.fill = 'red' 的方式去修改也不是不行，此時需要將矩形的 statefullCache 設(shè)置為 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 設(shè)為 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 樣式不更新解決方法案例的詳細(xì)內(nèi)容，更多關(guān)于Fabric.js 樣式更新的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論