Fabric.js 合并多个 Canvas JSON（或）SVG

Question

是否可以合并多个画布 JSON（或）SVG 文件。？ 示例代码：

var canvas, leftcanvas, rightcanvas, ctx, activeObject, text = '';
canvas = new fabric.Canvas('canvas');
ctx = canvas.getContext('2d');
text = new fabric.Text('canvas', {
    left: 50,
  top: 50,
  fill: 'red',
  fontFamily : 'Courier New',
});
canvas.add(text).renderAll().setActiveObject(text);

leftcanvas = new fabric.Canvas('leftcanvas');
var ctx1 = leftcanvas.getContext('2d');
var text = new fabric.Text('leftcanvas', {
    left: 50,
  top: 50,
  fill: 'red',
  fontFamily : 'Courier New',
});
leftcanvas.add(text).renderAll().setActiveObject(text);

rightcanvas = new fabric.Canvas('rightcanvas');
var ctx2 = leftcanvas.getContext('2d');
var text = new fabric.Text('rightcanvas', {
    left: 50,
  top: 50,
  fill: 'red',
  fontFamily : 'Courier New',
});
rightcanvas.add(text).renderAll().setActiveObject(text);

var JSON1, JSON2, JSON3 = '';
JSON1 = canvas.toJSON();
JSON2 = leftcanvas.toJSON();
JSON3 = rightcanvas.toJSON();

这里我们有 3 个 json 文件。我必须合并这些文件并导入新的画布。

Answer 1

var circle1 = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 0
});
var circle2 = new fabric.Circle({
  radius: 50,
  fill: 'green',
  left: 100
});
var circle3 = new fabric.Circle({
  radius: 50,
  fill: 'blue',
  left: 200
});

var group = new fabric.Group([ circle1, circle2, circle3 ], {
  left: 200,
  top: 100
});

canvas.add(group);