fabric.js如何使用fromObject api

Question

我想實現從一個模板到另一個模板的導入數據，而又不影響另一個模板的數據。 使用反序列化API loadFromJson將首先清空畫布數據，因此我想使用toObect方法導出數據，然后使用toFromObject導入，但是導入后對象無法正確顯示，請問是否有解決方案？還有其他實現嗎？謝謝

演示： 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

您從未將結果對象添加到畫布，這就是為什么您看不到它的原因，僅看到setActiveObject()所做的選擇。 您應該在fromObject()回調中添加對象：

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