Concat兩個用於在fabic.js畫布中添加數據的JSON對象

{ 
    "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。Concat兩個用於在fabic.js畫布中添加數據的JSON對象

來源

2017-02-24 Sagar Adke

請分享精力？我不是關閉織物，因爲我不確定織物，但你可以參考[如何在JS中合併對象]（http://stackoverflow.com/questions/171251/how-can-i-merge-properties -of-two-javascript-objects-dynamically）用於合併 – Rajesh

我不相信這是薩加爾·阿德克正在尋找的東西，但只有他可以對它說話。我已經給了他下面我想要的東西。 –

有根據什麼薩加爾Adke是許多選項最終試圖實現。不過，我認爲這可能是更接近於他在尋找：

選項1：

負載與json1 stringify'ing第一畫布，克隆對象，因爲再次加載將清除在canvas中，首先使用json2 stringify來加載畫布，然後添加克隆的對象。

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();

Working 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();

Working JSFiddle，http://jsfiddle.net/rekrah/okb2uj1m/。

OPTION 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(); 
});

Working JSFiddle，http://jsfiddle.net/rekrah/jnkLjrn4/。

（選項3功勞歸功於FabricJS大師，https://stackoverflow.com/a/19364574/3389046）

來源

2017-02-24 14:58:39

謝謝..這就是我真正想要的:) –

對於這種對象操作，我總是準備好underscore.js。這是我開始一個新項目時導入的第一個js庫。

http://underscorejs.org

看看：_.extend（甚至更好，看看整個LIB））

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

來源

2017-02-24 09:31:28 stevenvanc

Concat兩個用於在fabic.js畫布中添加數據的JSON對象

回答

相關問題