Question

我有2个JSON对象：

jSONObject1

{＆＃34;类型＆＃34;：＆＃34;组＆＃34;＆＃34; originX＆＃34;：＆＃34;左＆＃34;＆＃34; originY＆＃34;：＆＃34;顶部＆＃34;＆＃34;左＆＃34;：0，＆＃34;顶部＆＃34;：0，＆＃34;对象＆＃34 ;: [{＆＃34;类型＆＃34;：＆＃34;线＆＃34;＆＃34;中风＆＃34;：＆＃34;灰＆＃34;＆＃34; X 1＆＃34;：430，＆＃34; X 2＆＃34;：20.0，＆＃34; Y 1＆＃34;：430，＆＃34; Y2＆＃34;：430}， {＆＃34;类型＆＃34;：＆＃34;线＆＃34;＆＃34;中风＆＃34;：＆＃34;灰＆＃34;＆＃34; X 1＆＃34;：430，＆＃ 34; X 2＆＃34;：20.0，＆＃34; Y 1＆＃34;：20.0，＆＃34; Y2＆＃34;：20.0} {＆＃34;类型＆＃34;：＆＃34;线＆＃34;＆＃34;中风＆＃34;：＆＃34;灰＆＃34;＆＃34; X 1＆＃34;：430，＆＃ 34; X 2＆＃34;：430，＆＃34; Y 1＆＃34;：20.0，＆＃34; Y2＆＃34;：430}， {＆＃34;类型＆＃34;：＆＃34;线＆＃34;＆＃34;中风＆＃34;：＆＃34;灰＆＃34;＆＃34; X 1＆＃34;：20.0，＆＃ 34; X 2＆＃34;：20.0，＆＃34; Y 1＆＃34;：430，＆＃34; Y2＆＃34;：20.0}]}

包含要在画布上绘制的线条数组，构成建筑平面布置图

jSONObject2

{＆＃34;类型＆＃34;：＆＃34;组＆＃34;＆＃34; originX＆＃34;：＆＃34;左＆＃34;＆＃34; originY＆＃34;：＆＃34;顶部＆＃34;＆＃34;左＆＃34;：0，＆＃34;顶部＆＃34;：0，＆＃34;对象＆＃34;：[{＆＃34;类型＆＃34;：＆＃34; RECT＆＃34;＆＃34; originX＆＃34;：＆＃34;左＆＃34;＆＃34 ; originY＆＃34;：＆＃34;顶部＆＃34;＆＃34;左＆＃34;：45，＆＃34;顶部＆＃34;： - 405＆＃34;宽度＆＃34;：60，＆＃34;高度＆＃34; 60＆＃34;填充＆＃34;：＆＃34;红色＆＃34;}， {＆＃34;类型＆＃34;：＆＃34; RECT＆＃34;＆＃34; originX＆＃34;：＆＃34;左＆＃34;＆＃34; originY＆＃34;：＆＃34;顶部＆＃34;＆＃34;左＆＃34; 105＆＃34;顶部＆＃34;： - 405.0，＆＃34;宽度＆＃34; 60＆＃34;高度＆＃34;：60，＆＃34;填充＆＃34;：＆＃34;红色＆＃34;}， {＆＃34;类型＆＃34;：＆＃34; RECT＆＃34;＆＃34; originX＆＃34;：＆＃34;左＆＃34;＆＃34; originY＆＃34;：＆＃34;顶部＆＃34;＆＃34;左＆＃34; 165＆＃34;顶部＆＃34;： - 405.0，＆＃34;宽度＆＃34; 60＆＃34;高度＆＃34;：60，＆＃34;填充＆＃34;：＆＃34;蓝色＆＃34;}， {＆＃34;类型＆＃34;：＆＃34; RECT＆＃34;＆＃34; originX＆＃34;：＆＃34;左＆＃34;＆＃34; originY＆＃34;：＆＃34;顶部＆＃34;＆＃34;左＆＃34; 225＆＃34;顶部＆＃34;： - 405.0，＆＃34;宽度＆＃34; 60＆＃34;高度＆＃34;：60，＆＃34;填充＆＃34;：＆＃34;蓝色＆＃34;}]}

包含要在画布上绘制的矩形数组，用于显示平面布置图中不同点的指标。

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

将2个独立的JSON对象渲染到Canvas元素上而没有覆盖另一个的最佳方法是什么？

我查看this GitHub issue建议使用 fromObject（）方法从JSON添加对象而不清除整个画布。从理论上讲，这听起来像是一个不错的主意...这个页面也引出了2个jsfiddle＆＃34;例子＆＃34;如何使用这个fromObject方法，one of which doesn't even work和其他一个似乎工作但很不清楚。

尝试使用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对象。

Answer 2

我从未尝试过fromObject（）方法。

我首先尝试使用concat合并两个JSON对象，然后使用loadFromJson（）。

var finalFloorPlan = jSONObject1.concat(jSONObject2);

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

2 个答案: