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

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

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

引言

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

比如，創(chuàng)建一個(gè)矩形，這個(gè)矩形有自己的 ID 屬性，在執(zhí)行序列化操作出來的結(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 即可。

需要注意的是，這里說的 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ù)，而且用法都是一樣的。

代碼倉庫

? toJSON輸出自定義屬性

以上就是Fabric.js 保存自定義屬性方法示例的詳細(xì)內(nèi)容，更多關(guān)于Fabric.js 保存自定義屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效示例
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序開發(fā)之全局配置
這篇文章主要介紹了微信小程序開發(fā)之全局配置的相關(guān)資料,需要的朋友可以參考下
2017-05-05
Svelte調(diào)試模式j(luò)s級(jí)別差異和細(xì)化后的體積差異詳解
這篇文章主要為大家介紹了Svelte調(diào)試模式j(luò)s級(jí)別差異和細(xì)化后的體積差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用及實(shí)例詳解
這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下
2016-09-09
微前端框架qiankun源碼剖析之上篇
這篇文章主要為大家介紹了微前端框架qiankun的源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
微信小程序選項(xiàng)卡的簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序選項(xiàng)卡的簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
2017-05-05
JavaScript數(shù)組幾個(gè)常用方法總結(jié)
這篇文章主要介紹了JavaScript數(shù)組幾個(gè)常用方法，主要概述的方法有filter()、map()、sort()、reduce()、forEach()，這些方法都是JavaScript常用到的方法，下面文章內(nèi)容詳細(xì)介紹了他們的語法、參數(shù)、返回值等資料,需要的朋友可以參考一下
2021-11-11
微信公眾號(hào) 客服接口的開發(fā)實(shí)例詳解
這篇文章主要介紹了微信公眾號(hào) 客服接口的開發(fā)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2016-09-09
微信小程序解決請(qǐng)求服務(wù)器手機(jī)預(yù)覽請(qǐng)求不到數(shù)據(jù)的方法
這篇文章主要介紹了微信小程序解決請(qǐng)求服務(wù)器手機(jī)預(yù)覽請(qǐng)求不到數(shù)據(jù)的方法的相關(guān)資料,配置https時(shí)，要使用443端口，就可以解決，需要的朋友可以參考下
2017-01-01
詳解如何發(fā)布TypeScript編寫的npm包
這篇文章主要介紹了如何發(fā)布TypeScript編寫的npm包實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12