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

2023-02-16 06:02:05

本文簡介

不知道你有沒有遇到過在使用 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，矩形就會自動檢測屬性的值的更新。

// 省略部分程式碼
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 樣式更新的資料請關注it145.com其它相關文章！

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

目錄

本文簡介

是否需要重新繪製

程式碼倉庫

熱門文章