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

Posted 2023-03-25

【中文标题】Fabric.js 合并多个 Canvas JSON（或）SVG

【英文标题】：Fabric.js Merge Multiple Canvas JSON ( or ) SVG

【发布时间】：2017-04-04 22:51:21

【问题描述】：

是否可以合并多个画布 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 文件。我必须合并这些文件并导入新的画布。

【问题讨论】：

嗨，您需要合并来自不同用户的这些吗？我有一个类似的问题，只是想知道你是如何解决这个问题的？

【参考方案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);