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' 
    ); 
}