Canvas/Fabric.js .loadFromJSON() 替换整个画布

Question

我有 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":"线","笔画":"灰色" ,"x1":430,"x2":20.0,"y1":20.0,"y2":20.0},{"type":"线","笔画":"灰色","x1":430," x2":430,"y1":20.0,"y2":430}, {"type":"线","笔画":"灰色","x1":20.0,"x2":20.0,"y1" :430,"y2":20.0}]}

包含要在画布上绘制的一系列线条，这些线条构成建筑平面图

• jSONObject2

  {“类型”：“组”，“originX”：“左”，“originY”：“顶部”，“左”：0，“顶部”：0，“对象”：[{“类型”：“矩形” ,"originX":"左","originY":"顶部","左":45,"顶部":-405,"宽度":60,"高度":60,"填充":"红色"} ，{“类型”：“矩形”，“originX”：“左”，“originY”：“顶部”，“左”：105，“顶部”：-405.0，“宽度”：60，“高度”：60 ,"填充":"红色"}, {"类型":"矩形","originX":"左","originY":"顶部","左":165,"顶部":-405.0,"宽度":60,"高度":60,"填充":"蓝色"}, {"类型":"矩形","originX":"左","originY":"顶部","左":225, “顶部”：-405.0，“宽度”：60，“高度”：60，“填充”：“蓝色”}]}

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

我正在使用 .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();

提前致谢。

Answer 1

如果您查看 loadFromJSON 的代码，就会发现画布每次都会被清除。

loadFromJSON: function (json, callback, reviver) {
if (!json) {
  return;
}

// serialize if it wasn't already
var serialized = (typeof json === 'string')
  ? JSON.parse(json)
  : json;

this.clear();

var _this = this;
this._enlivenObjects(serialized.objects, function () {
  _this._setBgOverlay(serialized, callback);
}, reviver);

return this;
},

您需要连接两个 JSON 对象。