FabricJs-缩放/调整所有对象的大小并垂直居中

Question

我在重新调整画布上的对象时遇到问题，因此它们完全适合新调整大小后的画布的宽度，并将它们居中在画布中间的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，然后尝试将此新值添加到每个对象的顶部位置。  但是结果不是我想要的。它们没有垂直居中。

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

这是原始画布（1280x720）  

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

实际上是这样的：

我简单地添加extra_top的方法存在的问题是，如果我尝试将尺寸调整回1280x720（以原始画布大小为准），则所有内容均未对齐（实际上应该与未调整大小时相同）。

Answer 1

我觉得有点愚蠢，但是解决方案非常简单...  extra_top变量计算不正确。

我们需要考虑比例因子。  因此正确的extra_top值为：

var extra_top =（new_height-old_canvas_height * factor）/ 2;

效果很好。