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