javascript - 对象的 JSON 到达列表元素
问题描述
这可能很愚蠢,但我似乎无法弄清楚。我有一个通过 TypeScript 操作的对象(织物画布)。当我将以下内容放入源代码时,
var objects = this.canvas.getObjects()
console.log(JSON.stringify(objects[0]));
我明白了
{
"type": "group",
...
"objects": [
{
"type": "path",
...
但如果我把
console.log(JSON.stringify(objects[0].objects));
我明白了
undefined
如果我"group"
放console.log(JSON.stringify(objects[0].type))
了,我就明白了,所以我真的不明白这里发生了什么。我想有一些关于 JS 和/或 TS 的非常基本的事情我没有得到,或者某个地方可能缺少逗号。
编辑:
以下是console.log(JSON.stringify(objects[0],null,1))
我错误粘贴内容的完整输出:
{
"type": "group",
"originX": "left",
"originY": "top",
"left": 94.83,
"top": 83.17,
"width": 69,
"height": 47,
"fill": "transparent",
"stroke": null,
"strokeWidth": 0,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 0.5,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"objects": [
{
"type": "path",
"originX": "center",
"originY": "center",
"left": 0,
"top": 0,
"width": 68,
"height": 46,
"fill": "#c9c9c9",
"stroke": "transparent",
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "round",
"strokeLineJoin": "round",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"pathOffset": {
"x": 129.33333333333331,
"y": 106.66666666666666
},
"path": [
[
"M",
150.16666666666666,
110.33333333333333
],
[
"Q",
150.16666666666666,
110.33333333333333,
150.66666666666666,
110.33333333333333
],
[
"Q",
151.16666666666666,
110.33333333333333,
150.91666666666666,
110.33333333333333
],
[
"Q",
150.66666666666666,
110.33333333333333,
150.66666666666666,
111
],
[
"Q",
150.66666666666666,
111.66666666666666,
150,
112
],
[
"Q",
149.33333333333331,
112.33333333333333,
147.33333333333331,
114
],
[
"Q",
145.33333333333331,
115.66666666666666,
143.66666666666666,
117
],
[
"Q",
142,
118.33333333333333,
140.33333333333331,
119.66666666666666
],
[
"Q",
138.66666666666666,
121,
136.66666666666666,
122
],
[
"Q",
134.66666666666666,
123,
132.33333333333331,
124
],
[
"Q",
130,
125,
127,
126
],
[
"Q",
124,
127,
121.66666666666666,
128
],
[
"Q",
119.33333333333333,
129,
117.33333333333333,
129.33333333333331
],
[
"Q",
115.33333333333333,
129.66666666666666,
113,
129.66666666666666
],
[
"Q",
110.66666666666666,
129.66666666666666,
109,
129.66666666666666
],
[
"Q",
107.33333333333333,
129.66666666666666,
106.33333333333333,
129.66666666666666
],
[
"Q",
105.33333333333333,
129.66666666666666,
104.66666666666666,
129.66666666666666
],
[
"Q",
104,
129.66666666666666,
103,
129
],
[
"Q",
102,
128.33333333333331,
101,
126.66666666666666
],
[
"Q",
100,
125,
99,
123.33333333333333
],
[
"Q",
98,
121.66666666666666,
97.33333333333333,
119.33333333333333
],
[
"Q",
96.66666666666666,
117,
96.33333333333333,
114
],
[
"Q",
96,
111,
95.66666666666666,
109
],
[
"Q",
95.33333333333333,
107,
95.33333333333333,
104.66666666666666
],
[
"Q",
95.33333333333333,
102.33333333333333,
95.33333333333333,
100.66666666666666
],
[
"Q",
95.33333333333333,
99,
95.33333333333333,
97.33333333333333
],
[
"Q",
95.33333333333333,
95.66666666666666,
95.66666666666666,
94.33333333333333
],
[
"Q",
96,
93,
98,
91.66666666666666
],
[
"Q",
100,
90.33333333333333,
103.66666666666666,
88.66666666666666
],
[
"Q",
107.33333333333333,
87,
111,
86
],
[
"Q",
114.66666666666666,
85,
120,
84.33333333333333
],
[
"Q",
125.33333333333333,
83.66666666666666,
130.66666666666666,
83.66666666666666
],
[
"Q",
136,
83.66666666666666,
143.33333333333331,
83.66666666666666
],
[
"Q",
150.66666666666666,
83.66666666666666,
153,
83.66666666666666
],
[
"Q",
155.33333333333331,
83.66666666666666,
157.33333333333331,
84.33333333333333
],
[
"Q",
159.33333333333331,
85,
160,
85.33333333333333
],
[
"Q",
160.66666666666666,
85.66666666666666,
161.33333333333331,
86.33333333333333
],
[
"Q",
162,
87,
162.33333333333331,
87
],
[
"Q",
162.66666666666666,
87,
163,
87.33333333333333
],
[
"Q",
163.33333333333331,
87.66666666666666,
163.33333333333331,
88
],
[
"Q",
163.33333333333331,
88.33333333333333,
163.33333333333331,
88.66666666666666
],
[
"Q",
163.33333333333331,
89,
163.33333333333331,
89
],
[
"Q",
163.33333333333331,
89,
163.33333333333331,
89
],
[
"L",
163.33333333333331,
89
]
]
}
]
}
解决方案
Felix Kling 的建议就在这里。当一个 JS 对象有自己的toJSON()
实现时,JSON.stringify()
调用它而不是默认的:toJSON() 行为。
Fabric.js 对象正是这样做的:fabric.Group.prototype.toJSON()
. 如您所见,objects 数组实际上存储在_objects
属性中,但是当您序列化组时,它们被映射到objects
:
toObject: function(propertiesToInclude) {
var _includeDefaultValues = this.includeDefaultValues;
var objsToObject = this._objects.map(function(obj) {
var originalDefaults = obj.includeDefaultValues;
obj.includeDefaultValues = _includeDefaultValues;
var _obj = obj.toObject(propertiesToInclude);
obj.includeDefaultValues = originalDefaults;
return _obj;
});
var obj = fabric.Object.prototype.toObject.call(this, propertiesToInclude);
obj.objects = objsToObject;
return obj;
},
推荐阅读
- r - 创建极坐标热图,但留下一个扇形空间来注释每个环使用 R 表示的内容
- firebase - 升级到 Firebase Crashlytics SDK 时未收到 Firebase 崩溃报告
- memory - 在 C64 上寻找类似汇编器的旧机器人语言
- php - Laravel 登录列处理
- python - 尝试运行线程时出现 NameError
- java - 将 Hibernate 从 3 迁移到 4 后的事务问题
- flutter - 如何知道手机操作系统 IOS 还是 android Flutter
- verilog - 尝试将我的 verilog 代码从 modelsim 转移到 quartus 时出现很多错误
- javascript - 在浏览器选项卡之间切换时防止 SMIL 动画暂停
- docker - 如何从 docker run 命令检查命令行?