Здравствуйте! Пишу приложение, в котором есть кроп с ресайзом. Застопорился на ресайзе после кропа, не могу разобраться с расчетами при ресайзе, у прямоугольника который растягивается и картинки, которая должна подстраиваться под этот прямоугольник.
С обычным ресайзом проблем нет, а вот после кропа, размеры и пропорции у картинки и прямоугольника меняются.
Если вам не очень интересно читать то что я написал ниже то сразу к делу:
Мне нужна помощь с расчетами ресайза двух элементов - прямоугольника, который растягивается и картинкой внутри него. Из за разных размеров прямоугольника и картинки после кропа, я не могу найти нужную формулу для правильной подстановке картинки под прямоугольник. В конце ссылки на видео и код.
Как работает:
Итруктура элемента:
div.template-element
div.template-element-inner
img.template-element-content
есть класс Selectable, который при клике на .template-element ставит прямоугольник на этот элемент по размерам и координатам. Этот прямоугольник можно растягивать, и элемент растягивается вместе с прямоугольником (за это отвечает класс Resizable и колбек в классе Selectable, вложенный в событие resize:move).
При двойном нажатии на элемент появляется кроп и тут самое интересное:
Изначально у прямоугольника и картинки одинаковые размеры, то есть пропорции тоже одинаковы, но когда картинка кропится то прямоугольник становится меньше а картинка остается в исходных размерах.
И тут уже я не могу при ресайзе расчитать правильную подстановку картинки под прямоугольник. Сейчас при ресайзе картинка тоже растягивается но смещается по left/top, то есть не правильно.
Я снял видео с примером и залил код на codepen:
Видео:
Пример ресайза который я хочу сделать я показал на сайте canva.com (правое окно) и своим ресайзом (левое окно).
Код:
Только не пугайтесь пожалуйста, там 825 строк, но вам не нужно все смотреть, только колбек в ресайзе, начинается с 692 строки и заканчивается на 745 строке, там в основном комментарии с пояснениями.
Я не собираюсь переписывать канву, я указал ихний ресайз как пример.
