Fabric.js 儲存自定義屬性方法範例

2023-02-16 06:02:01

引言

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

比如，建立一個矩形，這個矩形有自己的 ID 屬性，在執行序列化操作出來的結果卻看不到 ID 屬性了。

如何在序列化時輸出自定義屬性？其實答案都寫在檔案裡。

本文會用真實程式碼演示一下如何在序列化時輸出自定義屬性。

動手試試看

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

toJSON 方法可以將畫布匯出為 JSON 資料。

<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>

點選按鈕之後就會在控制檯輸出一個 JSON 資料，是畫布自身的。

但從上圖可以看出，建立矩形rect 時自定義了一個 my_id 的屬性，但輸出時卻看不到 my_id。

如果希望在序列化時能輸出自定義屬性，可以在 toJSON() 方法裡傳入一個陣列，這個陣列裡標明要輸出的自定義屬性的 key 即可。

需要注意的是，這裡說的 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
}

點選按鈕後，在控制檯輸出的內容就包含了矩形自定義屬性 my_id 。

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

程式碼倉庫

⭐ toJSON輸出自定義屬性

以上就是Fabric.js 儲存自定義屬性方法範例的詳細內容，更多關於Fabric.js 儲存自定義屬性的資料請關注it145.com其它相關文章！

Fabric.js 儲存自定義屬性方法範例

目錄

引言

動手試試看

程式碼倉庫

熱門文章