连接两个 JSON 对象，用于在 fabric.js 画布中添加数据答案

【问题标题】：Concat two JSON object for adding data in fabic.js canvas连接两个 JSON 对象，用于在 fabric.js 画布中添加数据
【发布时间】：2017-07-15 00:51:44
【问题描述】：

{
  "objects": [{
    "type": "i-text",
    "originX": "left",
    "originY": "top",
    "left": 253.75,
    "top": 377.4,
    "width": 293.49609375,
    "height": 45.199999999999996,
    "fill": "#454545",
    "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,
    "text": "Start typing here",
    "fontSize": 40,
    "fontWeight": "normal",
    "fontFamily": "arial",
    "fontStyle": "",
    "lineHeight": 1.16,
    "textDecoration": "",
    "textAlign": "left",
    "textBackgroundColor": "",
    "charSpacing": 0,
    "originalScaleX": 1,
    "originalScaleY": 1,
    "originalLeft": 253.751953125,
    "originalTop": 377.4,
    "lockMovementX": false,
    "lockMovementY": false,
    "lockScalingX": false,
    "lockScalingY": false,
    "lockUniScaling": false,
    "lockRotation": false,
    "id": 8454,
    "styles": {}
  }],
  "background": "#ffffff",
  "height": 800,
  "width": 801,
  "originalHeight": 800,
  "originalWidth": 801
}

{
  "objects": [{
    "type": "i-text",
    "originX": "left",
    "originY": "top",
    "left": 253.75,
    "top": 377.4,
    "width": 293.49609375,
    "height": 45.199999999999996,
    "fill": "#454545",
    "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,
    "text": "Start typing here",
    "fontSize": 40,
    "fontWeight": "normal",
    "fontFamily": "arial",
    "fontStyle": "",
    "lineHeight": 1.16,
    "textDecoration": "",
    "textAlign": "left",
    "textBackgroundColor": "",
    "charSpacing": 0,
    "originalScaleX": 1,
    "originalScaleY": 1,
    "originalLeft": 253.751953125,
    "originalTop": 377.4,
    "lockMovementX": false,
    "lockMovementY": false,
    "lockScalingX": false,
    "lockScalingY": false,
    "lockUniScaling": false,
    "lockRotation": false,
    "id": 6668,
    "styles": {}
  }],
  "background": "#ffffff",
  "height": 800,
  "width": 801,
  "originalHeight": 800,
  "originalWidth": 801
}

我有这 2 个 fabric.js json 对象，我想通过使用 fabric loadJSON 方法连接并加载到画布？？

【问题讨论】：

请分享一下？我不会因为我不确定面料而关闭，但您可以参考how to merge objects in JS 进行合并
我不相信这就是 Sagar Adke 正在寻找的东西，但只有他能与之交谈。我给了他我相信他在下面寻找的东西。

标签： javascript angularjs json fabricjs

【解决方案1】：

有很多选择取决于 Sagar Adke 最终要达到的目标。但是，我认为这些可能更接近他正在寻找的内容：

选项 1：

先用json1 stringify'ing加载画布，克隆对象，因为再次加载会清除画布，先用json2 stringify'ing加载画布，然后添加克隆的对象。

canvas.loadFromJSON(JSON.stringify(json1), canvas.renderAll.bind(canvas));
var item = canvas.item(0).clone();
canvas.loadFromJSON(JSON.stringify(json2), canvas.renderAll.bind(canvas));
// only needed since objects are identical and I wanted to show both objects
item.set({
  top: item.top - 70
});
canvas.add(item);
canvas.renderAll();

正在工作的 JSFiddle，http://jsfiddle.net/rekrah/wxjnu7pd/。

选项 2：

将json2对象推入json1对象栈，然后先加载json1 stringify'ing的画布。

json1.objects.push(json2.objects[0]);
// the next line will put both objects on top of each other, since they're identical
canvas.loadFromJSON(JSON.stringify(json1), canvas.renderAll.bind(canvas));
canvas.renderAll();

工作 JSFiddle，http://jsfiddle.net/rekrah/okb2uj1m/。

选项 3：

使用此选项无需先对 json 进行字符串化，只需将一组结构对象传递给 enlivenObjects（在 fabric.util 中），然后在其回调中将每个对象添加到画布。

fabric.util.enlivenObjects([json1.objects[0], json2.objects[0]], function(objects) {
  var origRenderOnAddRemove = canvas.renderOnAddRemove;
  canvas.renderOnAddRemove = false;
  objects.forEach(function(o, i) {
    // IF only needed since objects are identical and I wanted to show both objects
    if (i == 0) o.set({
      top: o.top - 70
    });
    canvas.add(o);
  });
  canvas.renderOnAddRemove = origRenderOnAddRemove;
  canvas.renderAll();
});

工作中的 JSFiddle，http://jsfiddle.net/rekrah/jnkLjrn4/。

（选项 3 归功于 FabricJS 大师，https://stackoverflow.com/a/19364574/3389046）

【讨论】：

【解决方案2】：

对于这种对象操作，我总是准备好 underscore.js。这是我开始新项目时导入的第一个js库。

http://underscorejs.org

看看：_.extend（更好的是，看看整个库；））

_.extend({name: 'moe'}, {age: 50});
=> {name: 'moe', age: 50}

【讨论】：