Fabric.js 保存自定义属性方法示例
更新时间：2023年02月14日 09:04:50 作者：德育处主任
这篇文章主要为大家介绍了Fabric.js 保存自定义属性方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
之前有些工友留言：在 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() 都支持输出自定义参数，而且用法都是一样的。
代码仓库
以上就是Fabric.js 保存自定义属性方法示例的详细内容，更多关于Fabric.js 保存自定义属性的资料请关注脚本之家其它相关文章！
相关文章
jQuery幻灯片插件owlcarousel参数说明中文文档
jQuery幻灯片插件owlcarousel是一个小巧强大兼容性强的幻灯片插件，兼容IE6以上所有浏览器，本文主要介绍了字的使用方法与中文参数与API说明2018-02-02
这篇文章主要介绍了JavaScript高级程序设计之变量与作用域，文章主要通过描述原始值与引用值、instanceof、作用域展开具体内容,需要的朋友可以参考一下2021-11-11
这篇文章主要为大家介绍了前端JavaScript算法找出只出现一次的数字的算法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了Jest 如何支持异步及时间函数实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了输入框跟随文字内容适配宽实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了前端常见跨域解决方案的相关内容，包括对跨域的解释，常见跨域场景以及跨域解决方案，内容丰富，需要的朋友可以参考下。2017-09-09
JS中 querySelector 与 getElementById 方法区别
这篇文章主要介绍了JavaScript中 querySelector 与 getElementById 方法与区别，围绕querySelector 与 getElementById 的相关资料展开文章内容,需要的朋友可以参考一下2021-10-10
这篇文章主要为大家介绍了前端面试必会的网络跨域问题解决方法讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了JavaScript实现队列结构的过程,队列即Queue，它是受限的线性表，先进先出，受限之处在于它只允许在表的前端进行删除操作，下面我们一起进入文章学习更加详细内容,需要的朋友也可以参考一下2021-12-12
这篇文章主要为大家介绍了前端对接WebSocket与心跳重连实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论