连接两个 JSON 对象以在 fabic.js canvas 中添加数据

Question

{
  "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 方法连接并加载到 canvas？

Answer 1

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

http://underscorejs.org

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

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

Answer 2

根据 Sagar Adke 最终要实现的目标，有多种选择。不过，我认为这些可能更接近他正在寻找的东西：

选项 1：

首先使用 json1 字符串化加载 canvas，克隆对象，因为再次加载将清除 canvas，使用 [=56] 加载 canvas =]2 先进行字符串化，然后添加克隆的对象。

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 字符串化加载 canvas。

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 中），然后将每个对象添加到 canvas 中它的回调。

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 大师，）

连接两个 JSON 对象以在 fabic.js canvas 中添加数据

Concat two JSON object for adding data in fabic.js canvas

javascript

json

fabricjs

angularjs