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() 都支持输出自定义参数，而且用法都是一样的。

代码仓库

toJSON输出自定义属性

以上就是Fabric.js 保存自定义属性方法示例的详细内容，更多关于Fabric.js 保存自定义属性的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Fabric.js 样式不更新解决方法案例

    目录 本文简介 是否需要重新绘制 代码仓库 本文简介 不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式? 如果你也遇到同样的问题的话,可以尝试使用本文的方法. 是否需要重新绘制 我先举个例子. <canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> let canvas = new fabric

  • Fabric.js 监听元素是否相交重叠

    目录 正文 动手试试看 代码仓库 正文 fabric.js 提供了一个方法可以检查对象是否与另一个对象相交(也可以叫元素是否重叠). 这个方法叫 intersectsWithObject(). 本文主要想提一下 fabric.js 存在这么一个方便的方法. 检测元素是否相交有什么用呢? 这个功能在日常开发中其实很实用,在它的帮助下我们可以实现“防止对象碰撞”.“对象自动对齐贴合”等功能. 动手试试看 为了演示 intersectsWithObject() ,我打算做如下操作: 创建画布 创建矩形

  • Fabric.js 实现变换视窗示例详解

    Fabric.js 实现变换视窗示例详解

    目录 引言 viewportTransform 缩放 斜切 平移 setViewportTransform(vpt) 引言 fabric.js 可以通过 viewportTransform 属性配置画布的视窗属性. 听上去很高级的样子,但其实这是原生 canvas 就已经存在的东西,fabric.js 的 viewportTransform 也就直接复用了原生 canvas 的 transform() . fabric.js 官方文档上也是这么说的 viewportTransform :Arra

  • JS前端轻量fabric.js系列之画布初始化

    目录 前言 画布的前置知识 画布初始化 变换练习 小结 前言 从这个章节开始我们就步入正题了,那一开始要做啥子呢,回忆下上个章节中 fabric.js 的使用过程,先是创建画布,再添加物体,然后开始动画和交互.显然画布是一切物体的开端,所以首先要搞定的就是它,也就是 const canvas = new fabric.Canvas('canvas') 这一步要做的事情. 画布的前置知识 在说 fabric.js 如何初始化画布之前,先巩固下画布的相关知识点.创建画布要做的事情通常比较简单,就是单

  • Fabric.js 修改画布交互方式作用详解

    Fabric.js 修改画布交互方式作用详解

    目录 本文简介 动手试试 和 hasControls .hasBorders 的区别 和 StaticCanvas 的区别 总结 本文简介 fabric.js 为我们提供了很多厉害的方法.今天要搞明白的一个东西是 canvas.interactive . 官方文档对 canvas.interactive 的解释是: Indicates that canvas is interactive. This property should not be changed. canvas.interacti

  • JS前端轻量fabric.js系列物体基类

    目录 前言 FabricObject 基类的实现 抽离共同属性 抽离共同方法 Rect 类的实现 本章小结 前言 在上个章节中我们已经创建了画布,接下来就可以进行物体的绘制了,那具体要怎么画呢?根据文章标题可以猜到应该是要抽象出一个物体基类,归纳出一些它们的共性,那它们能有啥共性呢,毕竟每个物体好像都是各画各的.对于这个问题大家可以先简单思考几秒钟再往下看

  • Fabric.js 拖拽平移画布方法示例

    目录 正文 原理解析 按下鼠标时 移动鼠标时 松开鼠标时 代码仓库 正文 使用 fabric.js 创建出来的画布默认是不能拖拽移动的. 不过我们可以利用一些小技巧让画布具有被拖拽的能力,fabric.js 官网也提供了一个 demo ,但文档上并没有详细的讲解拖拽画布的实现原理. 本文就粗略分析一下这个原理. 原理解析 鼠标拖拽的原理其实很简单,主要就3步: 鼠标点击元素 移动鼠标 松开鼠标 在鼠标移动时,获取鼠标当前位置,然后修改被拖拽元素的位置. 当松开鼠标时,也要获取松手那刻鼠标所在位置

  • PHP采集静态页面并把页面css,img,js保存的方法

    本文实例讲述了PHP采集静态页面并把页面css,img,js保存的方法.分享给大家供大家参考.具体分析如下: 这是一个可以获取网页的html代码以及css,js,font和img资源的小工具,主要用来快速获取模板,如果你来不及设计UI或者看到不错的模板,则可以使用这个工具来抓取网页和提取资源文件,提取的内容会按相对路径来保存资源,因此你不必担心资源文件的错误url导入. 首页 index.php,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <

  • Python执行js字符串常见方法示例

    目录 方法 1--js2py 2--execjs 3--execjs 方法 执行大型js时有点慢 特殊编码的输入或输出参数会出现报错,解决方法: 可以把输入或输出的参数用base64编码一下.base64都是英文和数字,没有特殊字符了 1--js2py pip insatll js2py # 获取执行JS的环境 context = js2py.EvalJs() # 加载执行 context.execute('放JS字符代码') 2--execjs import execjs print(exec

  • 利用原生JS实现data方法示例代码

    前言 在开发中经常会在DOM上存储一些自定义数据,我们可以通过setAttribute方法来实现.但是当数据为引用类型时,存储后的数据却无效.这里将用原生的JS对data方法进行实现. 使用setAttribute: <div id="test-data"></div> <p class="test-data-list"></p> <p class="test-data-list">&l

  • smarty中js的调用方法示例

    本文实例讲述了smarty中js的调用方法,分享给大家供大家参考.具体方法分析如下: 一.问题: 有时候,在smarty中,包含js的时候,整个页面就不会显示,而程序员往往在页面中找错误,程序页面,模板页面检查了多次都没有错误,就很郁闷了. 二.解决办法: 把模板页面中的js代码拷贝出来放在新建的js文件中,然后在包含到模板页面里面,如: 复制代码 代码如下: {popup_init src="css/commen.js"} 这样一来,问题就解决了. 希望本文所述对大家的PHP程序设计

  • 微信小程序提取公用函数到util.js及使用方法示例

    微信小程序提取公用函数到util.js及使用方法示例

    本文实例讲述了微信小程序提取公用函数到util.js及使用方法.分享给大家供大家参考,具体如下: 在小程序中,定义了一项工具文件utils,此文件的js旨在本文件之内有效,当其他子页面想调用其中的js方法或者变量时,需要两步骤: 1:在utils被调用的js文件中,面向对象的方式模型输出: module.exports={要调用的函数名称:要调用的函数名称 }; 2:在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址&quo

  • 前台js调用后台方法示例

    1.后台方法 复制代码 代码如下: public string AA(string cc) { string dd = "大家好才是真的好"; string message=dd+cc; return message; } 前台JS 复制代码 代码如下: function Init() { var v = "中国"; var s = '<%=AA("' + v + '") %>'; alert(s); } 2.post提交 PVISA

  • echarts同一页面中四个图表切换的js数据交互方法示例

    echarts同一页面中四个图表切换的js数据交互方法示例

    需求: 点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 其余的就不多说,直接上js代码了 示例代码: $(function() { $("#heart").on("click", function() { $('.heart-car').show(); $('.sleep-car').hide(); $('.breathe-car').hide(); $('.sport-car').hide(); }); $("#bre

  • 原生js实现trigger方法示例代码

    前言 事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘.除了由坐在电脑前的大叔们用键盘.鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现? 首先需要将事件绑定至指定DOM节点上 // 在一个节点上绑定一个事件 let test = document.createElement('div'); test.id = 'test'; test.innerHTML = '测试事件'; document.body.appendChild(test); test.addEventListener

随机推荐