首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Fabric.js 保存自定义属性

本文简介 之前有些工友留言:在 fabric.js 中怎么保存元素的自定义属性? 比如,创建一个矩形,这个矩形有自己的 ID 属性,在执行序列化操作出来的结果却看不到 ID 属性了。...如何在序列化时输出自定义属性?其实答案都写在文档里。 本文会用真实代码演示一下如何在序列化时输出自定义属性。 动手试试看 序列化的方法有好几个,我用 toJSON 为例。...但从上图可以看出,创建 矩形rect 时自定义了一个 my_id 的属性,但输出时却看不到 my_id。...如果希望在序列化时能输出自定义属性,可以在 toJSON() 方法里传入一个数组,这个数组里标明要输出的自定义属性的 key 即可。 需要注意的是,这里说的 key 是字符串类型。...代码仓库 ⭐ toJSON输出自定义属性

2.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jsevent loop

    JsEvent Loop js单线程 ​ 总所周知,JavaScript是单线程的,也就是说同一时间只能做一件事,那为什么JavaScript不能是多线程的呢,这跟它的用途有关,作为浏览器脚本语言...因此为了避免这种问题,js必须是一门单线程的语言! 任务队列 ​ 所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。...task) 等待执行栈和微任务队列都执行完毕才会执行,并且在执行完每一个宏任务之后,会去看看微任务队列有没有新添加的任务,如果有,会先将微任务队列中的任务清空,才会继续执行下一个宏任务 为了更好地理解Event...Loop,请看下图(转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》) 案例 案例1 console.log(111); setTimeout...需要注意的是,立即resolve()的 Promise 对象,是在本轮“事件循环”(event loop)的结束时执行,而不是在下一轮“事件循环”的开始时。

    95020

    js中的事件(event

    window.event,而标准浏览器的事件对象就是形参e; 所以事件对象的兼容性写法为:e = e||window.event; 以下是常用的事件对象的属性: var x =e.clientX,y=e.clientY...鼠标的X坐标:“+x+”鼠标的Y坐标:“+Y+”事件发生在哪儿:“+e.target; } document.onmousemove=fn;把烦恼直接赋值给document的onmousemove这个属性...示例2: var ele = document.getElememtById('div1'); document.onkeydown = function(e){ e=e||wondow.event;...当你在网页上点击鼠标右键的时候会出现一个右键菜单;当你在一个form表单里点击提交按钮时网页会产生一个行为病刷新网页,当你网页上滚动鼠标滚轮的时候,页面的滚动条会滚动等等;这些都叫事件的默认行为,如果想把这些默认行为取消了,相应的js...return false}//方法里加个 return false,就是组织超链接点击时的跳转行为了; document.oncontextmenu = function(){ //在这里可以加一些代码,实现自定义的右键菜单

    6.8K30

    js Event Loop 运行机制

    Event Loop,事件环,线程进程。这些概念对初识前端的同学来说可能会一头雾水。而且运行js代码的运行环境除了浏览器还有node。因此不同环境处理Event Loop又变得不同,十分容易混淆。...浏览器中的进程和线程和Event Loop 浏览器的进程 从打开浏览器开始,打开浏览器,我们首先看到的是,用户界面,这里有搜索框,显示区,还有收藏夹等等。这些会分配一个进程。...js渲染引擎的Event Loop 以上线程,每个拿出来都可以详细的说上一篇。Event Loop涉及到的JS引擎的一些运行机制的分析。...js渲染引擎的Event Loop如下图 ?...node下Event Loop 事件环的整体还是不变的,执行栈,消息队列,api。不同的是,node下的消息队列有所不同 ?

    1.7K40

    JS:事件循环机制(Event Loops)

    ** 事件循环,即 Event Loops。用于协调事件、用户交互、JavaScript 脚本、DOM 渲染、网络请求等等的执行顺序问题。...一个遵循 ECMAScript 标准的代理(浏览器或 JS 引擎)也必须遵循事件循环机制。 事件循环是由一个或以上的 **任务队列** 组成的。 3. **什么是任务队列?...由于 JavaScript 是 **单线程** 语言,所以在 JS 中所有的任务都需要排队执行,这些任务共同组成了 **任务队列** ,依次排队执行的过程,形成一个 **执行栈(Execution Context...to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FWindow%2FsetImmediate)(Node.js 环境...to=https%3A%2F%2Fhtml.spec.whatwg.org%2Fmultipage%2Fwebappapis.html%23event-loops) * [并发模型与事件循环 - JavaScript

    1.5K10

    js nextSibling属性和previousSibling属性

    1:nextSibling属性属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。...需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示: 先来看一个例子: <input id=“a4” type=“button” οnclick...opera和safari对nextSibling的处理方式与FF一致 2:previousSibling属性属性与nextSibling属性的作用正好相反。...3:通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题 一般先通过nextSibling.nodeName来获知其标签名,或者通过nextSibling.nodeType...如果该nextSibling.nodeName = #text,则通过nextSibling.nodeValue来获知其文本值;否则,可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性

    6.7K30

    JS引擎的执行机制event loop

    2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2点: (1) JS是单线程语言 (2) JSEvent Loop是JS的执行机制...深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢?...是通过的事件循环(event loop),理解了event loop机制,就理解了JS的执行机制 2.JS中的event loop(1) 例1,观察它的执行顺序 console.log(1)...所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务 图片描述 按照这种分类方式:JS的执行机制是 首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table...重复以上2步骤,结合event loop(1) event loop(2) ,就是更为准确的JS执行机制了。

    1.7K40

    深入 JS 对象属性

    属性决定JS中对象的状态,本文章主要分析这些属性是如何工作的。 JS几种不同的属性 JS有三种不同的属性:数据属性,访问器属性和内部属性。...属性特性(attribute) 属性的所有状态,包括数据和元数据,都存储在特性(attribute)中。它们是属性具有的字段,就像对象具有属性一样。...如果设为false,将阻止某些操作改写该属性,比如无法删除该属性,也不得改变该属性属性描述对象(value属性除外)。也就是说,configurable属性控制了属性描述对象的可写性。 3....每个属性都有自己对应的属性描述对象,保存该属性的一些元信息。下面是值为123属性描述对象的一个例子。...如果没有指定为 undefined,则是要添加到新创建对象的可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。

    8.5K50

    android自定义属性

    1、引言 对于自定义属性,大家肯定都不陌生,遵循以下几步,就可以实现: 自定义一个CustomView(extends View )类 编写values/attrs.xml,在其中编写styleable...我自定义属性,我声明属性就好了,为什么一定要写个styleable呢? 如果系统中已经有了语义比较明确的属性,我可以直接使用嘛?...这里提一下,系统中定义的属性,其实和我们自定义属性的方式类似,你可以在sdk/platforms/android-xx/data/res/values该目录下看到系统中定义的属性。...我自定义属性,我声明属性就好了,为什么一定要写个styleable呢? 其实的确是可以不写的,怎么做呢?...我们在自定义View的时候,可以使用系统已经定义的属性

    2.2K100

    自定义属性操作

    1.自定义属性操作 1.1 获取属性值  element.属性 获取属性值。... element.getAttribute('属性'); 区别: element.属性 获取内置属性值(元素本身自带的属性) element.getAttribute(‘属性’); 主要获得自定义属性...H5自定义属性 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute(‘属性’) 获取。...但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。 H5给我们新增了自定义属性: 1. 设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值。...比如 或者使用 JS 设置 element.setAttribute(‘data-index’, 2) 2. 获取H5自定义属性 1.

    78230
    领券