Fabricjs - 如何检测对象存在的画布的总宽度/高度

Question

所以我想保存基于比例1的画布，我想包括所有现有的/可见的对象。

所以现在，我的画布是600x400，如果我要保存它，它只会保存600x400内部的内容，并且它尊重缩放级别（较高的缩放将会看到较少的东西，较低的缩放会看到更多的东西但更小）。

我解决此得到通过运行此代码：

let zoom = this.canvas.getZoom(); 
this.canvas.setZoom(1); 
let url = this.canvas.toDataURL({width: 1000, height: 700, multiplier: 1}); 
this.canvas.setZoom(zoom); 
window.open(
    url, 
    '_blank' // <- This is what makes it open in a new window. 
); 

这样做是将图像保存为1000x700，这样的东西，是过去600像素，但1000下仍然得到保存。

但是，这是硬编码。所以我想知道是否有一个现有的函数或干净/简单的方法来检测所有对象在哪里，并返回完整大小（宽度和高度）。

小提琴：http://jsfiddle.net/1pxceaLj/3/

更新1：

var gr = new this.fabric.Group([], { 
    left: 0, 
    top: 0 
}); 
this.canvas.forEachObject((o) => { 
    gr.add(o); 
}); 

this.canvas.add(gr); 
this.canvas.renderAll(); 

console.log(gr.height, gr.width); // 0 0 

解决方案

使用组是最好的办法。最好的例子：http://jsfiddle.net/softvar/mRA8Z/

function selectAllCanvasObjects(){ 
    var objs = canvas.getObjects().map(function(o) { 
     return o.set('active', true); 
    }); 

    var group = new fabric.Group(objs, { 
     originX: 'center', 
     originY: 'center' 
    }); 

    canvas._activeObject = null; 

    canvas.setActiveGroup(group.setCoords()).renderAll(); 
    console.log(canvas.getActiveGroup().height); 
} 

Answer 1

一种可能性是使用fabricjs group，并添加所有创建的对象到这个容器创建一种容器。

我更新了你的提琴在这里：http://jsfiddle.net/1pxceaLj/4/

因此，你可以只使用group.width和group.height，或许加入少许偏差或最小值，有你有动力值具有较小，即使通入toDataUrl帆布。

代码：

var canvas = new fabric.Canvas('c'); 

var shadow = { 
    color: 'rgba(0,0,0,0.6)', 
    blur: 20,  
    offsetX: 10, 
    offsetY: 10, 
    opacity: 0.6, 
    fillShadow: true, 
    strokeShadow: true 
} 

var rect = new fabric.Rect({ 
     left: 100, 
     top: 100, 
     fill: "#FF0000", 
     stroke: "#000", 
     width: 100, 
     height: 100, 
     strokeWidth: 10, 
     opacity: .8  
    }); 

var rect2 = new fabric.Rect({ 
     left: 800, 
     top: 100, 
     fill: "#FF0000", 
     stroke: "#000", 
     width: 100, 
     height: 100, 
     strokeWidth: 10, 
     opacity: .8  
    });  
rect.setShadow(shadow); 
//canvas.add(rect); 
//canvas.add(rect2); 

var gr = new fabric.Group([ rect, rect2 ], { 
    left: 0, 
    top: 0 
}); 

canvas.add(gr); 

function save() 
{ 
     alert(gr.width); 
    alert(gr.height); 
    let zoom = canvas.getZoom(); 
    var minheight = 700; 
    canvas.setZoom(1); 
    let url = this.canvas.toDataURL({width: gr.width, height: gr.height > minheight ? gr.height : minheight, multiplier: 1}); 
    canvas.setZoom(zoom); 
    window.open(
     url, 
     '_blank' 
    ); 
}