前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Fabric.js 保存自定义属性

Fabric.js 保存自定义属性

作者头像
德育处主任
发布于 2022-10-28 08:54:00
发布于 2022-10-28 08:54:00
2.9K00
代码可运行
举报
运行总次数:0
代码可运行

本文简介

之前有些工友留言:fabric.js 中怎么保存元素的自定义属性?

比如,创建一个矩形,这个矩形有自己的 ID 属性,在执行序列化操作出来的结果却看不到 ID 属性了。

如何在序列化时输出自定义属性?其实答案都写在文档里。

本文会用真实代码演示一下如何在序列化时输出自定义属性。

动手试试看

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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 是字符串类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 省略部分代码
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输出自定义属性

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-10-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Fabric.js 自定义控件
虽然 Fabric.js 提供的基础功能已经很丰富了,但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。掌握创建自定义控件这个功能,能够创建更加精美和实用的图形应用程序,提高用户体验和用户满意度。
德育处主任
2023/03/12
4.9K0
Fabric.js 自定义控件
fabric.js和高级画板
本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式、网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角
磊哥
2018/05/08
11.3K1
fabric.js和高级画板
Fabric.js 控制元素层级 👑
元素数量多了,难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。
德育处主任
2022/08/31
4K0
Fabric.js 控制元素层级 👑
Fabric.js 样式不更新怎么办?
不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式?
德育处主任
2023/02/26
2.9K0
Fabric.js 样式不更新怎么办?
Fabric.js 居中元素 🎗️
阅读本文需要你有一定的 Fabric.js 基础,如果还不太了解 Fabric.js 是什么,可以阅读 《Fabric.js 从入门到膨胀》
德育处主任
2022/06/10
3.7K0
Fabric.js 居中元素 🎗️
Fabric.js 从入门到________
如果你需要用 canvas 做特效,那我推荐你使用 Fabric.js ,因为 Fabric.js 语法更加简单易用,而且还提供了很多交互类的 api。
德育处主任
2022/04/17
13.5K0
Fabric.js 从入门到________
Fabric.js 锁定背景图,不受缩放和拖拽的影响🎃
如果你的项目有画布拖拽、缩放等功能,而且你不希望背景图跟随拖拽或缩放,那一定要往下读。
德育处主任
2022/06/10
3.3K0
Fabric.js 锁定背景图,不受缩放和拖拽的影响🎃
Fabric.js 自定义选框样式
框选是 fabric.js 默认提供的一种操作,fabric.js 提供了几个属性可以设置选框样式。
德育处主任
2022/09/23
2.3K0
Fabric.js 自定义选框样式
Fabric.js 自由绘制矩形(逐一分析4种操作方向带来的影响)
起始点 的 x 和 y 坐标 都小于 结束点,( 起始点x < 结束点x;起始点y < 结束点y ) :
德育处主任
2022/04/17
3.7K2
Fabric.js 自由绘制矩形(逐一分析4种操作方向带来的影响)
Fabric.js 摆正元素的4种方法(带过渡动画)
我不知道 straighten 使用 “摆正” 这个词来翻译正不正确,反正我就是要这么叫!
德育处主任
2022/04/17
1.2K0
Fabric.js 摆正元素的4种方法(带过渡动画)
Fabric.js 橡皮擦的用法(包含恢复功能)
Fabric.js 的基础包并没有包含橡皮擦模块,如果你的项目需要使用橡皮擦,要使用定制版的 Fabric.js 。
德育处主任
2022/09/23
2.7K0
Fabric.js 橡皮擦的用法(包含恢复功能)
Fabric.js 元素被选中时保持原有层级🥁
不知道你在使用 Fabric.js 时有没有发现,如果一个画布存在多个元素,而且它们之前是层叠的,当你选中底层的元素时,那个元素会跳到最顶层;当你释放该元素后,它又跑回原有层级。这是 Fabric.js 的默认状态。
德育处主任
2022/06/10
2.5K0
Fabric.js 元素被选中时保持原有层级🥁
Fabric.js 修改画布交互方式到底有什么用?
fabric.js 为我们提供了很多厉害的方法。今天要搞明白的一个东西是 canvas.interactive 。
德育处主任
2022/09/23
1.4K0
Fabric.js 修改画布交互方式到底有什么用?
聊聊 19.7k Star 的 canvas 绘图神器 fabric.js
我们想在画布上画个基本的简单形状的时候,使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动,绘制复杂的图形和在特定情况需要改变图片的时候,使用原生 canvas API 将会变得很困难。 而 Fabric 旨在解决这个问题。
秋风的笔记
2021/09/22
3.7K0
聊聊 19.7k Star 的 canvas 绘图神器 fabric.js
Fabric.js 复制粘贴元素
当你要复制一个 fabric 的元素时,你考虑到的是什么?是深拷贝当前选中对象再添加到画布中?
德育处主任
2023/06/10
7300
Fabric.js 复制粘贴元素
Fabric.js 设置容器类名要注意这几点
用 fabric.js 创建画布时,fabric.js 会在 canvas 元素外包一层 div 容器。
德育处主任
2022/09/23
1.1K0
Fabric.js 设置容器类名要注意这几点
Fabric.js 拖拽顶点修改多边形形状
其实 Fabric.js 官网也有这个demo:Fabric.js demos · Custom controls, polygon 。但这个demo可能对于刚接触 Fabric.js 的工友来说有点过于复杂,所以本文就把该demo进一步简化,简化到老奶奶也能看得懂的!
德育处主任
2023/05/11
2K0
Fabric.js 拖拽顶点修改多边形形状
Fabric.js 自定义子类,创建属于自己的图形~
虽然 fabric.js 提供了非常简单的方法创建自定义子类,但如果需要创建复杂的图形,还是需要有一定 canvas 基础的。
德育处主任
2022/09/23
1.7K0
Fabric.js 自定义子类,创建属于自己的图形~
Fabric.js 元素中心缩放
如果想将默认缩放操作设置为“中心缩放”,只需将 centeredScaling 属性设置为 true 即可。
德育处主任
2022/09/23
3.1K0
Fabric.js 元素中心缩放
Fabric.js 右键菜单
Fabric.js 默认**没提供 鼠标右键事件**,只有 鼠标按键点击 、鼠标按键抬起 、鼠标移动 等事件。 但在工作中有可能需要用到 “右键” 事件,比如 “右键菜单” 。所以就有了本文。 本文主要关注 Fabric.js 的主要 api 有:
德育处主任
2022/04/17
7.2K0
Fabric.js 右键菜单
相关推荐
Fabric.js 自定义控件
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文