fabric.js如何使用fromObject api

Question

I want to implement importing data from one template into another without affecting data from the other. Using deserialization API loadFromJson will empty the canvas data first, so I want to use toObect method to export the data, and then use toFromObject to import, but the object cannot display correctly after the import, may I ask if there is any solution?Or is there another implementation?thank you

demo: https://jsfiddle.net/laibin/gpvef0k5/2/

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script>
<canvas id="canvas" style="border: 1px solid black" height=480 width=460></canvas>
<button id="btn">导出</button>
<canvas id="canvas_template" style="border: 1px solid black; margin-top: 20px" height=480 width=660></canvas>

Javascript:

var canvas = new fabric.Canvas('canvas');
var canvas_template = new fabric.Canvas('canvas_template');

var circle = new fabric.Circle({
    radius: 50, left: 275, top: 75, fill: '#aac'
})

var triangle = new fabric.Triangle({
    width: 100, height: 100, left: 50, top: 300, fill: '#cca'
});

var rect1 = new fabric.Rect({
    width: 200, height: 100, left: 0, top: 50, angle: 30,
    fill: 'rgba(255,0,0,0.5)'
});
var group = new fabric.Group([circle, triangle, rect1])
canvas.add(group).setActiveObject(group);
canvas.renderAll();

document.querySelector('#btn').addEventListener('click',function() {
    var data = group.toObject();
    let newGroup = new fabric.Group([]);

    fabric.Group.fromObject(data, function(obj) {
        console.log('newGroup', obj)
        canvas_template.setActiveObject(obj).renderAll();
    })
})

Answer 1

You never added the resulting object to canvas, that's why you didn't see it, only the selection made by setActiveObject() . You should add the object in the fromObject() callback:

fabric.Group.fromObject(data, function(obj) {
  canvas_template.add(obj) // <- like this
  console.log('newGroup', obj)
  canvas_template.setActiveObject(obj).renderAll();
})