У меня проблема с масштабированием объектов с холста, поэтому они идеально соответствуют ширине нового холста с измененным размером и центрируются по оси 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 объекта. Но результаты не те, что я хочу. Они не центрированы по вертикали.
Кто-нибудь может помочь с этим вопросом?
Вот текущий измененный размер холста (720x1280). Обратите внимание, что любой размер должен работать, в настоящее время я тестирую с 16:9 и 9:16, но размер не очень важен:
А вот как это должно выглядеть на самом деле:
Проблема с моим подходом к простому добавлению extra_top заключается в том, что если я попытаюсь изменить размер обратно до 1280x720 (до исходного размера холста), все будет смещено (когда на самом деле оно должно быть идентично тому, когда оно не было изменено).