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

Question

我有 2 个 JSON 个对象：

jSONObject1

{"type":"group","originX":"left","originY":"top","left":0, "top":0,"objects": [{"type":"line","stroke":"grey","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":"grey","x1":430,"x2":430,"y1":20.0,"y2":430}, {"type":"line","stroke":"grey","x1":20.0,"x2":20.0,"y1":430,"y2":20.0}]}

包含要在构成建筑平面图

的canvas上绘制的一组线

jSONObject2

{"type":"group","originX":"left","originY":"top","left":0, "top":0, "objects":[{"type":"rect","originX":"left","originY":"top","left": 45,"top":-405,"width":60,"height":60,"fill":"red"}, {"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,"height":60,"fill":"blue"}, {"type":"rect","originX":"left","originY":"top","left":225,"top" :-405.0,"width":60,"height":60,"fill":"blue"}]}

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

我正在使用 .loadFromJSON(...) 在 canvas 上呈现所需的 lines/rectangles。问题是每次调用此函数时，它都会完全替换 canvas 上的所有内容，而不是将平面图度量矩形覆盖在平面图上。

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

我查看了 this GitHub issue which suggests using the fromObject() method to add objects from JSON without clearing the entire canvas. In theory this sounds like a decent idea... This page also leads to 2 jsfiddle "examples" of how to use this fromObject method, 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

我从未尝试过 fromObject() 方法。

我会尝试先使用 concat 合并两个 JSON 对象，然后使用 loadFromJson()。

var finalFloorPlan = jSONObject1.concat(jSONObject2);

Answer 2

如果您查看 loadFromJSON 的代码，canvas 每次都会被清除。

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 对象。

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

Canvas/Fabric.js .loadFromJSON() replaces entire canvas

javascript

json

canvas

fabricjs