FabricJs - масштабирование/изменение размера всех объектов и центрирование их по вертикали

У меня проблема с масштабированием объектов с холста, поэтому они идеально соответствуют ширине нового холста с измененным размером и центрируются по оси Y в середине холста. Код, размещенный в stackoverflow, помогает изменять размер, если вы оставляете объекты в одном и том же «верхнем» положении (и не заставляете их выравниваться посередине).

Вот код, который я использую, и он отлично работает: function 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) Исходный холст — 1280 x 720

Вот текущий измененный размер холста (720x1280). Обратите внимание, что любой размер должен работать, в настоящее время я тестирую с 16:9 и 9:16, но размер не очень важен: введите здесь описание изображения

А вот как это должно выглядеть на самом деле: введите здесь описание изображения

Проблема с моим подходом к простому добавлению extra_top заключается в том, что если я попытаюсь изменить размер обратно до 1280x720 (до исходного размера холста), все будет смещено (когда на самом деле оно должно быть идентично тому, когда оно не было изменено).


person BlasterGod    schedule 18.07.2019    source источник


Ответы (1)


Я чувствую себя немного глупо, но решение было очень простым... Переменная extra_top вычислялась неправильно.

Мы должны учитывать масштабный фактор. Таким образом, правильное значение extra_top:

var extra_top=(new_height-old_canvas_height*фактор)/2;

И это работает идеально.

person BlasterGod    schedule 18.07.2019