有两个 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,祝你有美好的一天!