有两个 Canvas 实例,自由绘制的'd'越小,'c'越大。如何仅将“d”上的绘图边界添加到“c”,而不是将整个“d” Canvas 区域添加到“c”有很多空白区域?

Fiddle

我希望代码可以解释得更清楚。谢谢。

HTML

<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()

最佳答案

最后,我找到了问题的答案,只需使用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);
}

fiddle here

特别感谢@AndreaBogazzi,祝你有美好的一天!

09-11 01:49
查看更多