Canvas / Fabric.js .loadFromJSON（）替换整个画布

我有2个JSON对象：

• jSONObject1

  {“ type”：“ group”，“ originX”：“ left”，“ originY”：“ top”，“ left”：0，“ top”：0，“ objects：[{” type“：” line“ ，“笔画”：“灰色”，“ x1”：430，“ x2”：20.0，“ y1”：430，“ y2”：430}，{“ type”：“ line”，“ stroke”：“ grey” ，“ x1”：430，“ x2”：20.0，“ y1”：20.0，“ y2”：20.0}，{“ type”：“ line”，“ stroke”：“灰色”，“ x1”：430，“ x2“：430，” y1“：20.0，” y2“：430}，{” type“：” line“，” stroke“：” grey“，” x1“：20.0，” x2“：20.0，” y1“ ：430，“ y2”：20.0}]}

包含要在画布上绘制的构成建筑物平面图的线的阵列

• jSONObject2

  {“ type”：“ group”，“ originX”：“ left”，“ originY”：“ top”，“ left”：0，“ top”：0，“ objects”：[{“ type”：“ rect” ，“ originX”：“左”，“ originY”：“顶部”，“左”：45，“顶部”：-405，“宽度”：60，“高度”：60，“填充”：“红色”} ，{“ type”：“ rect”，“ originX”：“ left”，“ originY”：“ top”，“ left”：105，“ top”：-405.0，“ width”：60，“ height”：60 ，“ fill”：“ red”}，{“ type”：“ rect”，“ originX”：“ left”，“ originY”：“ top”，“ left”：165，“ top”：-405.0，“ width “：60，”高度“：60，”填充“：”蓝色“}，{“ type”：“ rect”，“ originX”：“ left”，“ originY”：“ top”，“ left”：225，“ top”：-405.0，“ width”：60，“ height”：60， “ fill”：“ blue”}]}

包含要在画布上绘制的矩形数组，这些矩形显示了平面图中不同点的度量。

我正在使用.loadFromJSON（...）在画布上渲染所需的线/矩形。问题在于，每次调用此函数时，它都会完全替换画布上的所有内容，而不是在平面图上覆盖平面图度量矩形。

将2个独立的JSON对象呈现到Canvas元素上而不覆盖另一个的最佳方法是什么？

我看过这个GitHub问题，它建议使用fromObject（）方法从JSON添加对象，而无需清除整个画布。从理论上讲，这听起来像是一个不错的主意...此页面还引出了2个jsfiddle“示例”，介绍了如何使用此fromObject方法，其中一个甚至不起作用，另一个似乎起作用，但尚不清楚。

尝试使用loadFromJSON（）（覆盖）：

Canvas canvas = document.getElementById("myCanvas");
canvas.loadFromJSON(JSON.stringify(jSONObject1))
canvas.loadFromJSON(JSON.stringify(jSONObject2))
canvas.renderAll();

尝试使用fromObject（）（无效）

var jSONObjects = jSONObject1.concat(jSONObject2);
for (var i = 0; i < jSONObjects.length; i++) {
    var klass = fabric.util.getKlass(jSONObjects[i].type);
    var obj = klass.fromObject(jSONObjects[i]);
    canvas.add(obj);
}
canvas.renderAll();

提前致谢。