您好我正在开展canvas项目，允许用户与不同的形状，文本，svg对象等进行交互。关于要求是实现重新创建应用程序状态，例如用户将一些对象添加到画布并以某种方式修改它们，然后他就可以上传特定文件并继续他的工作。我正在使用fabricjs来操纵对象，我试图序列化所有画布，但它不是选项，因为它们看起来完全无序。所以我以json格式保存状态，我可以重新创建文本节点，但我不知道如何处理svg，他们的状态看起来像这样。
{
"type": "path-group",
"originX": "center",
"originY": "center",
"left": 231,
"top": 146,
"width": 100,
"height": 100,
"fill": "rgba(248,231,28,1)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"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,
"paths": [{
"type": "path",
"originX": "left",
"originY": "top",
"left": 9.66,
"top": 130.67,
"width": 232.39,
"height": 360.46,
"fill": "rgba(248,231,28,1)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"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": [0.20361290742942778, 0, 0, 0.20361290742942778, 0, 0],
"skewX": 0,
"skewY": 0,
"path": [
["M", 213.153, 436.584],
["c", 4.451, -2.109, 8.9, -5.104, 12.912, -9.115],
["c", 12.625, -12.617, 15.977, -45.43, 15.977, -45.43],
["s", -32.813, 3.359, -45.421, 15.978],
["c", -8.789, 8.787, -13.096, 19.566, -12.227, 28.074],
["c", -40.67, -20.011, -50.931, -42.173, -58.254, -58.277],
["c", 0.414, 0.566, -0.963, -1.376, 0.924, 1.251],
["c", -7.937, -17.513, -12.235, -35.367, -8.972, -54.361],
["c", 2.245, -10.532, 5.365, -18.738, 9.043, -25.465],
["c", 10.046, 15.523, 27.113, 26.555, 39.523, 32.923],
["c", 1.671, 0.861, 3.717, 0.519, 5.031, -0.843],
["c", 1.304, -1.353, 1.575, -3.407, 0.652, -5.056],
["c", -11.305, -20.258, -10.277, -44.41, -8, -59.448],
["c", 4.76, -2.722, 9.425, -5.556, 13.763, -9.09],
["c", 33.067, -26.921, 47.149, -81.743, 22.535, -105.768],
["c", -24.596, -24.032, -87.602, -5.843, -111.627, 18.754],
["l", -0.716, 0.732],
["c", -10.389, 10.628, -19.639, 21.582, -27.551, 33.044],
["c", -13.357, 3.159, -29.708, 4.752, -45.501, -0.326],
["c", -1.791, -0.582, -3.757, 0.088, -4.824, 1.641],
["c", -1.075, 1.543, -1.011, 3.62, 0.159, 5.094],
["c", 7.18, 9.027, 18.142, 20.537, 31.427, 28.139],
["c", -10.635, 26.144, -14.695, 55.221, -9.982, 89.053],
["c", 16.351, 103.167, 99.273, 134.736, 152.185, 127.461],
["l", 0.319, -0.039],
["c", -1.617, 8.707, 2.762, 20.321, 12.092, 29.644],
["c", 12.608, 12.624, 45.429, 15.977, 45.429, 15.977],
["s", -3.36, -32.813, -15.977, -45.43],
["C", 222.053, 441.679, 217.611, 438.686, 213.153, 436.584],
["z"]
],
"pathOffset": {
"x": 125.85227442431159,
"y": 310.9014004211868
}
}, {
"type": "path",
"originX": "left",
"originY": "top",
"left": 249.07,
"top": 0,
"width": 232.38,
"height": 360.46,
"fill": "rgba(248,231,28,1)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"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": [0.20361290742942778, 0, 0, 0.20361290742942778, 0, 0],
"skewX": 0,
"skewY": 0,
"path": [
["M", 480.549, 290.232],
["c", -7.188, -9.027, -18.142, -20.545, -31.429, -28.139],
["c", 10.636, -26.142, 14.695, -55.221, 9.982, -89.052],
["C", 442.753, 69.875, 359.83, 38.305, 306.918, 45.58],
["l", -0.326, 0.041],
["c", 1.616, -8.709, -2.763, -20.322, -12.092, -29.645],
["C", 281.89, 3.352, 249.069, 0, 249.069, 0],
["s", 3.36, 32.813, 15.977, 45.429],
["c", 4.02, 4.021, 8.463, 7.014, 12.92, 9.115],
["c", -4.449, 2.109, -8.899, 5.103, -12.912, 9.114],
["c", -12.625, 12.625, -15.977, 45.43, -15.977, 45.43],
["s", 32.813, -3.358, 45.423, -15.977],
["c", 8.787, -8.787, 13.095, -19.566, 12.227, -28.083],
["c", 40.677, 20.012, 50.93, 42.182, 58.261, 58.285],
["c", -0.414, -0.565, 0.963, 1.376, -0.923, -1.25],
["c", 7.936, 17.512, 12.234, 35.368, 8.972, 54.361],
["c", -2.245, 10.531, -5.367, 18.738, -9.043, 25.465],
["c", -10.046, -15.521, -27.113, -26.548, -39.524, -32.924],
["c", -1.671, -0.86, -3.717, -0.519, -5.03, 0.843],
["c", -1.306, 1.354, -1.577, 3.408, -0.654, 5.056],
["c", 11.305, 20.251, 10.277, 44.41, 8, 59.448],
["c", -4.761, 2.723, -9.425, 5.556, -13.763, 9.09],
["c", -33.067, 26.923, -47.149, 81.744, -22.535, 105.77],
["c", 24.597, 24.031, 87.603, 5.843, 111.626, -18.755],
["l", 0.718, -0.732],
["c", 10.388, -10.627, 19.63, -21.581, 27.55, -33.044],
["c", 13.358, -3.159, 29.709, -4.752, 45.501, 0.326],
["c", 1.792, 0.582, 3.758, -0.086, 4.824, -1.64],
["C", 481.783, 293.783, 481.719, 291.706, 480.549, 290.232],
["z"]
],
"pathOffset": {
"x": 365.25982983860837,
"y": 180.22835921734554
}
}]}
似乎几乎所有函数序列化画布都有一种方法从状态渲染特定对象并保持它与用户创建它一样吗？
答案 0 :(得分：0)
当你说对象出现完全无序时，我认为你的意思是不保留对象的z-index。在这种情况下，您可能有两个选择：
1）为每个对象添加一个自定义属性，然后按the tutorial
中的描述扩展toObject（）方法2）你可以尝试直接将canvas.getObjects（）转换为JSON - 对象应该按照z-index的顺序