本文簡(jiǎn)介

不知道你有沒(méi)有遇到過(guò)在使用 Fabric.js 時(shí)無(wú)意中一些騷操作修改了元素的樣式，但刷新畫(huà)布卻沒(méi)更新元素樣式？

如果你也遇到同樣的問(wèn)題的話，可以嘗試使用本文的方法。

是否需要重新繪制

我先舉個(gè)例子。

<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() // 刷新畫(huà)布
}, 1000)
</script>

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

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

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

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

但如果你堅(jiān)持使用 rect.fill = 'red' 的方式去修改也不是不行，此時(shí)需要將矩形的 statefullCache 設(shè)置為 true，矩形就會(huì)自動(dòng)檢測(cè)屬性的值的更新。

// 省略部分代碼
let rect = new fabric.Rect({
  left: 50,
  
  
  top: 30,
  width: 80,
  height: 60,
  fill: 'hotpink',
  statefullCache: true // 自動(dòng)檢測(cè)更新
})
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

說(shuō)了這么多，最后我還是推薦通過(guò) set() 方法修改元素的屬性。

代碼倉(cāng)庫(kù)

? 是否需要重新繪制緩存的副本

以上就是Fabric.js 樣式不更新解決方法案例的詳細(xì)內(nèi)容，更多關(guān)于Fabric.js 樣式更新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論