• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Fabric.js 保存自定义属性

武飞扬头像
德育处主任
帮助14

动手试试看

序列化的方法有好几个,我用 toJSON 为例。

 

toJSON 方法可以将画布导出为 JSON 数据。

01.png

<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 是字符串类型。

 

02.png

// 省略部分代码
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() 都支持输出自定义参数,而且用法都是一样的。

这篇文章转载于:学新通

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通
  • 本文地址: https://www.swvq.com/boutique/detail/tanfbcih
  • 联系方式: luke.wu●vfv.cc
系列文章
更多 icon
同类精品
更多 icon
我要评论
我的头像
精彩评论
继续加载