关于前端:Fabricjs-保存自定义属性

本文简介

点赞 + 关注 + 珍藏 = 学会了

之前有些工友留言：在 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 铅笔笔刷》

《Fabric.js 设置容器类名要留神这几点》

《Fabric.js 自定义子类，创立属于本人的图形》

《Fabric.js 元素被遮挡的局部也能够操作》

点赞 + 关注 + 珍藏 = 学会了
代码仓库