fabic.jsのキャンバスにデータを追加するための2つのJSONオブジェクトconc

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 
} 

ファブリックloadJSONメソッドを使用してキャンバスに連結してロードする2つのfabric.js jsonオブジェクトがありますか？

Answer 1

（より良いとしても、全体のlibを見てみましょう）最終的に達成しようとしています。しかし、私は、これらのは、彼が探しているものに近いかもしれないと思う：

OPTION 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/。

OPTION 2：

プッシュjson1オブジェクトスタックにオブジェクト、およびその後json1最初stringify'ingキャンバスをロードjson2。

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を文字列化だけ（fabric.utilに）enlivenObjectsに布オブジェクトの配列を渡し、そのコールバックでキャンバスに各オブジェクトを追加する必要はありません。

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）

Answer 2

このようなオブジェクト操作のために、私はいつもunderscore.jsを用意しています。新しいプロジェクトを開始するときに最初にインポートするjsライブラリです。

http://underscorejs.org

を見てみましょう：_.extendを; サーガルAdkeが何であるかに応じて、多くのオプションがあります）

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