FabricJs - 缩放/调整所有对象的大小并将它们垂直居中答案

【问题标题】：FabricJs - Scale/Resize All Objects And Center Them VerticallyFabricJs - 缩放/调整所有对象的大小并将它们垂直居中
【发布时间】：2019-11-27 09:25:05
【问题描述】：

我在从画布重新缩放对象时遇到问题，因此它们完全适合新调整大小的画布的宽度，并将它们在画布中间的 Y 轴上居中。只要您将对象保持在相同的“顶部”位置（并且不要强迫它们居中对齐），stackoverflow 上发布的代码就有助于调整大小。

这是我正在使用的代码，并且运行良好：函数 zoomIt(new_width,new_height,old_canvas_width,old_canvas_height) {

    if(old_canvas_width!=new_width) //if the new canvas width is different than the old width, we need to resize all objects within the canvas
    { 
        var factor=new_width/old_canvas_width; //find multiplier for scalling
        var extra_top=(new_height-old_canvas_height)/2;

        var objects = canvas.getObjects();

        for (var i in objects) {
            var scaleX = objects[i].scaleX;

            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;


            var tempScaleX = scaleX * factor;
            var tempScaleY = scaleY * factor;
            var tempLeft = left * factor;
            var tempTop = top * factor;

            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop + extra_top;


            objects[i].setCoords();
        }
        canvas.renderAll();
        canvas.calcOffset();
    }
}

我已添加： var extra_top=(new_height-old_canvas_height)/2;

我计算画布的新高度和旧高度之间的差异，除以 2 并尝试将这个新值添加到每个对象的 TOP 位置。但结果不是我想要的。它们不是垂直居中的。

有人可以帮忙解决这个问题吗？

这是原始画布 (1280x720)

这是当前调整大小的画布 (720x1280)。请注意任何尺寸都可以使用，目前我使用 16:9 和 9:16 进行测试，但尺寸并不真正相关：

它实际上应该是这样的：

我简单添加 extra_top 的方法的问题在于，如果我尝试将大小调整回 1280x720（原始画布大小），一切都会错位（实际上应该与未调整大小时相同）。

【问题讨论】：

标签： html5-canvas fabricjs scaletransform

【解决方案1】：

我觉得有点傻，但是解决方法超级简单…… extra_top 变量计算不正确。

我们需要考虑比例因子。所以正确的 extra_top 值是：

var extra_top=(new_height-old_canvas_height*factor)/2;

而且效果很好。

【讨论】：