Javascript FabricJS如何重新添加字符串化json对象（反序列化）

我有一个JSON格式的画布对象

{"type":"rect",
"originX":"left",
"originY":"top",
"left":100,
"top":100,
"width":200,
"height":200,
"fill":"blue",
"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,
"rx":0,
"ry":0}

如何使用

canvas.add（）

反序列化此对象以重新添加它

---

我不想使用canvas.loadFromJSON（），因为它会清除当前的画布内容。

是的，canvas.loadFromJSON（）会首先清除画布。您可以尝试以下方法：

var画布；
var json='{“objects”：[{“type”：“rect”，“left”：100，“top”：100，“width”：200，“height”：200，“fill”：“blue”}]}；
canvas=newfabric.canvas（'c'）；
//创建一个对象，以表明加载JSON时不会覆盖该对象
var circle=新结构。circle({
半径：50，填充：“绿色”，左侧：50，顶部：50
});
canvas.add（圆圈）；
canvas.renderAll（）；
//解析JSON并将对象添加到画布
var jsonObj=JSON.parse（JSON）；
fabric.util.enlivenObjects（jsonObj.objects，函数（EnlivedObjects）{
freeach（函数（obj，索引）{
canvas.add（obj）；
});
canvas.renderAll（）；
});
画布。loadFromJSON（）首先清除画布。您可以尝试以下方法：


var画布；
var json='{“objects”：[{“type”：“rect”，“left”：100，“top”：100，“width”：200，“height”：200，“fill”：“blue”}]}；
canvas=newfabric.canvas（'c'）；
//创建一个对象，以表明加载JSON时不会覆盖该对象
var circle=新结构。circle({
半径：50，填充：“绿色”，左侧：50，顶部：50
});
canvas.add（圆圈）；
canvas.renderAll（）；
//解析JSON并将对象添加到画布
var jsonObj=JSON.parse（JSON）；
fabric.util.enlivenObjects（jsonObj.objects，函数（EnlivedObjects）{
freeach（函数（obj，索引）{
canvas.add（obj）；
});
canvas.renderAll（）；
});

我只想添加一个对象，不需要迭代，请您检查一下，然后告诉我我做错了什么，非常快！工作：-）更新了我的JSFIDLE！我已经更新了我的答案，以显示如何添加单个对象是的，仅提及：-）我只想添加一个对象，无需迭代，请检查此项并告诉我我在这里做错了什么，这非常快！工作：-）更新了我的JSFIDLE！我已更新了我的答案，以显示如何添加单个对象是的，仅提及：-）