Fabric.js 保存自定義屬性方法示例

更新時(shí)間：2023年02月14日 09:04:50 作者：德育處主任

這篇文章主要為大家介紹了Fabric.js 保存自定義屬性方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

之前有些工友留言：在 fabric.js 中怎么保存元素的自定義屬性？

比如，創(chuàng)建一個(gè)矩形，這個(gè)矩形有自己的 ID 屬性，在執(zhí)行序列化操作出來(lái)的結(jié)果卻看不到 ID 屬性了。

如何在序列化時(shí)輸出自定義屬性？其實(shí)答案都寫在文檔里。

本文會(huì)用真實(shí)代碼演示一下如何在序列化時(shí)輸出自定義屬性。

動(dòng)手試試看

序列化的方法有好幾個(gè)，我用 toJSON 為例。

toJSON 方法可以將畫布導(dǎo)出為 JSON 數(shù)據(jù)。

<canvas id="c" width="500" height="400" style="border: 1px solid #ccc;"></canvas>
<button onclick="handleToJSON()">toJSON</button>
<script>
  let canvas = new fabric.Canvas('c')
  let rect = new fabric.Rect({
    width: 30,
    height: 30,
    top: 10,
    left: 10,
    my_id: 'rect01'
  })
  canvas.add(rect)
  function handleToJSON() {
    console.log(canvas.toJSON()) // 序列化，輸出JSON
  }
</script>

點(diǎn)擊按鈕之后就會(huì)在控制臺(tái)輸出一個(gè) JSON 數(shù)據(jù)，是畫布自身的。

但從上圖可以看出，創(chuàng)建矩形rect 時(shí)自定義了一個(gè) my_id 的屬性，但輸出時(shí)卻看不到 my_id。

如果希望在序列化時(shí)能輸出自定義屬性，可以在 toJSON() 方法里傳入一個(gè)數(shù)組，這個(gè)數(shù)組里標(biāo)明要輸出的自定義屬性的 key 即可。

需要注意的是，這里說(shuō)的 key 是字符串類型。

// 省略部分代碼
let canvas = new fabric.Canvas('c')
let rect = new fabric.Rect({
  width: 30,
  height: 30,
  top: 10,
  left: 10,
  my_id: 'rect01'
})
canvas.add(rect)
function handleToJSON() {
  console.log(canvas.toJSON(['my_id'])) // 序列化，輸出JSON
}

點(diǎn)擊按鈕后，在控制臺(tái)輸出的內(nèi)容就包含了矩形自定義屬性 my_id 。

除了 toJSON() 外，toObject()、toDatalessJSON()、toDatalessObject() 都支持輸出自定義參數(shù)，而且用法都是一樣的。