Подстроить координаты top/left при групповом масштабировании? Как реализовать масштабирование нескольких элементов, относительно другого элемента?
Пишу ресайз (на подобии canva.com, google presentation и т.д.) он должен ресайзить как один элемент так и несколько. Рабоатет это так, есть контейнер с элементами, и рядом с контейнером элементов лежит элемент ресайза, и когда элементы выделяются, то элемент ресайза высчитывает размеры и подстраивает его под выбраные элементы.
Проблема в том, что элементы лежат отдельно от ресайзера, так как элементы должны подстраиваться по ресайзер ,во время его ресайза.
Если бы элементы лежали внутри ресайзера, то я бы без проблем сделал это таким образом:scaleWidth = containerNewWidth / containerSourceWidth
scaleHeight = containerNewHeight / containerSourceHeight
elemenWidth = elementWidth * scaleWidth
elementLeft = elementLeft * scaleWidth
elementHeight = elementHeight * scaleHeight
elementTop = elementTop * scaleHeight
и тогда все элементы подстроятся внутри ресайзера.
но постоянно перемещать при начале ресайза элементы в ресайзер не хотелось бы, потому, что из за спецификации приложения это очень не желательно, хотя можно.
В общем если я применяю код выше, то элементы нормально масштабируются по width, heigth, а top, left не получается подогнать, я пробовал уже подстраивать координаты, прибавляя/ вычитая координаты контейнеров... что только не делал, не получается подстроить по top, left....

21 Авг 2019 в 06:05
160 +1
0
Ответы
1

Для масштабирования нескольких элементов относительно другого элемента без перемещения их внутрь ресайзера, можно использовать следующий подход:

Получите текущие координаты и размеры всех элементов, которые вы хотите масштабировать относительно элемента ресайзера.

Вычислите коэффициенты масштабирования для ширины и высоты элементов:

scaleWidth = containerNewWidth / containerSourceWidth;
scaleHeight = containerNewHeight / containerSourceHeight;Примените коэффициенты масштабирования к размерам всех элементов:elemenWidth = elementWidth * scaleWidth;
elementHeight = elementHeight * scaleHeight;Теперь для каждого элемента вычислите новые координаты top и left относительно элемента ресайзера:elementLeft = elementLeft−containerSourceLeftelementLeft - containerSourceLeftelementLeftcontainerSourceLeft * scaleWidth + containerNewLeft;
elementTop = elementTop−containerSourceTopelementTop - containerSourceTopelementTopcontainerSourceTop * scaleHeight + containerNewTop;

Где containerSourceLeft, containerSourceTop - это координаты контейнера исходного размера, а containerNewLeft, containerNewTop - это координаты контейнера нового размера.

Таким образом, вы сможете масштабировать несколько элементов относительно элемента ресайзера с учетом их текущих координат и размеров.

20 Апр 2024 в 13:24
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки в течение 1 года
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Поможем написать учебную работу
Прямой эфир