在fabricjs中将自由绘图结果添加到另一个画布上

Question

有两个画布实例，较小的“d”用于自由绘制，较大的“c”将被添加。如何仅将“d”上的绘图边界添加到“c”，而不是整个“d”画布区域（其中有很多空白区域）添加到“c”？ 示例代码

<canvas width="300" height="300" id="c"></canvas>
<canvas width="150" height="150" id="d"></canvas>
<button id="btn">add To c</button>

JavaScript

var c = new fabric.Canvas('c')
var d = new fabric.Canvas('d', {
    isDrawingMode: true
})

document.getElementById('btn').onclick = addDrawToBig

function addDrawToBig(){
  var svg = d.toSVG()
  fabric.loadSVGFromString(svg,function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    c.add(obj).centerObject(obj).setActiveObject(obj);
  });
}

var circle = new fabric.Circle({
  stroke: 'red',
  radius: 15,
  left: 15,
  top: 15
})

d.add(circle)
d.renderAll()

addDrawToBig()

- chunh

---

抱歉，我尝试了几次仍然无法发布我的问题。我是StackOverflow的初学者。请谅解。 - chunh

不用道歉，你上次的更新很好！ - user1693593

Answer 1

最终我找到了我的问题的答案，只需要使用fabric.Group和.clone()方法：

function addDrawToBig(){
  var group = [ ]
  d.getObjects().forEach(function(path){
    path.clone(function(copy){
      group.push(copy);
    });
  });
  group = new fabric.Group( group )
  c.add(group).centerObject(group).setActiveObject(group);
}

在这里进行代码演示

特别感谢@AndreaBogazzi，祝您拥有美好的一天！

- chunh

---

我很喜欢看到人们如此频繁地使用fabricJs。 - AndreaBogazzi

Answer 2

我使用更好的方法更新了你的代码片段。 代码片段

Canvas.toSVG() 不应该被用作导出和导入功能。

我建议你循环遍历画布对象并在新画布中克隆它们。 这个演示并没有真正地克隆它们，只是将它们复制到了另一个画布上。 如果不克隆，你会发现一个副作用是，如果你在一个画布中修改了一些东西，那么这个修改也会反映在另一个画布中。 你应该添加

c.add(ao[i].clone());

但由于某种原因，自由绘制路径 .clone() 失败了。（接下来几天会查看是否是错误或误用）

var c = new fabric.Canvas('c')
var d = new fabric.Canvas('d', {
    isDrawingMode: true
})

document.getElementById('btn').onclick = addDrawToBig

function addDrawToBig(){
    var ao = d.getObjects();
    console.log(ao);
    for(var i in ao) {
      c.add(ao[i]);
    }
}

var circle = new fabric.Circle({
    stroke: 'red',
    radius: 15,
    left: 15,
    top: 15
})

d.add(circle)
d.renderAll()

addDrawToBig()

希望能有所帮助。

- AndreaBogazzi

---

感谢@AndreaBogazzi，您的fiddle似乎会将每个添加到“c”上的绘图/路径单独制作，这不完全是我想要的。但是由于您的想法，我更新了此fiddle here，fabric.Group是拯救的正确方法。非常感谢！ - chunh