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

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

這篇文章主要為大家介紹了Fabric.js?樣式不更新解決方法案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

本文簡(jiǎn)介

不知道你有沒(méi)有遇到過(guò)在使用 Fabric.js 時(shí)無(wú)意中一些騷操作修改了元素的樣式，但刷新畫布卻沒(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() // 刷新畫布
}, 1000)
</script>

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

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

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

其實(shí)正確的做法是使用 rect.set('fill', 'red') 去修改矩形顏色，set() 方法會(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() 方法修改元素的屬性。