将画布序列化与元数据合并答案

【问题标题】：Merging canvas serialization with meta data将画布序列化与元数据合并
【发布时间】：2013-02-03 11:25:37
【问题描述】：

我正在构建一个基于 kinetic.js 的交互式环境。我希望能够保存和加载画布的状态以及元数据。

我已经知道我可以使用stage.toJSON() 来序列化/保存并使用Kinetic.Node.create(stageJson, 'container') 来加载。但我想向该序列化添加任意数据，以跟踪我的环境将定义/使用的其他属性。

标准 kinetic.js 序列化示例：

{
    "attrs": {
        "width": 578,
        "height": 200,
        "x": 0,
        "y": 0
    },
    "nodeType":"Shape",
    "shapeType":"Rect"
}

我希望能够保存/加载的示例：

{
    "attrs": {
        "width": 578,
        "height": 200,
        "x": 0,
        "y": 0
    },
    "nodeType":"Shape",
    "shapeType":"Rect",
    "metaData": {"foo": "bar"}
}

这里最好的方法是什么？我可以在传递元数据之前破解/包装序列化和加载函数以添加/拉出元数据，但这似乎笨重且难以实现，特别是如果有很多嵌套层和形状需要解析。我可以保存两个完全独立的序列化，一个由 kinetic.js 生成，另一个由我自己的代码生成，但同样很笨重。谁有更好的主意？

【问题讨论】：

标签： javascript html5-canvas kineticjs

【解决方案1】：

toJSON() 序列化所有舞台 (Node) 的属性。
我没有尝试过，但您似乎可以使用setAttr(key,val) 将自己的属性添加到舞台上。设置它们后，它们将被序列化，我假设也被反序列化......

请注意，这并不是您所要求的，因为额外数据不在 JSON 的根级别，而是在 attrs 子对象中

【讨论】：

我可能很傻，但似乎没有Node 的getAttr(key) 方法，只是霰弹枪式的getAttrs()。奇怪。
getAttrs().keyName 就可以了
或者显然是getAttrs()['keyName']