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

回答

相关问题