Математические расчеты при кроп-ресайзе элементов с разными пропорциями? Здравствуйте! Пишу приложение, в котором есть кроп с ресайзом. Застопорился на ресайзе после кропа, не могу разобраться с расчетами при ресайзе, у прямоугольника который растягивается и картинки, которая должна подстраиваться под этот прямоугольник.
С обычным ресайзом проблем нет, а вот после кропа, размеры и пропорции у картинки и прямоугольника меняются.
Если вам не очень интересно читать то что я написал ниже то сразу к делу:
Мне нужна помощь с расчетами ресайза двух элементов - прямоугольника, который растягивается и картинкой внутри него. Из за разных размеров прямоугольника и картинки после кропа, я не могу найти нужную формулу для правильной подстановке картинки под прямоугольник. В конце ссылки на видео и код.Как работает:
Итруктура элемента: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 строке, там в основном комментарии с пояснениями.
Я не собираюсь переписывать канву, я указал ихний ресайз как пример.
Математические расчеты при кроп-ресайзе элементов с разными пропорциями? Здравствуйте! Пишу приложение, в котором есть кроп с ресайзом. Застопорился на ресайзе после кропа, не могу разобраться с расчетами при ресайзе, у прямоугольника который растягивается и картинки, которая должна подстраиваться под этот прямоугольник.
С обычным ресайзом проблем нет, а вот после кропа, размеры и пропорции у картинки и прямоугольника меняются.
Если вам не очень интересно читать то что я написал ниже то сразу к делу:
Мне нужна помощь с расчетами ресайза двух элементов - прямоугольника, который растягивается и картинкой внутри него. Из за разных размеров прямоугольника и картинки после кропа, я не могу найти нужную формулу для правильной подстановке картинки под прямоугольник. В конце ссылки на видео и код.Как работает:
Итруктура элемента: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 строке, там в основном комментарии с пояснениями.
Я не собираюсь переписывать канву, я указал ихний ресайз как пример.
С обычным ресайзом проблем нет, а вот после кропа, размеры и пропорции у картинки и прямоугольника меняются.
Если вам не очень интересно читать то что я написал ниже то сразу к делу:
Мне нужна помощь с расчетами ресайза двух элементов - прямоугольника, который растягивается и картинкой внутри него. Из за разных размеров прямоугольника и картинки после кропа, я не могу найти нужную формулу для правильной подстановке картинки под прямоугольник. В конце ссылки на видео и код.Как работает:
Итруктура элемента: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 строке, там в основном комментарии с пояснениями.
Я не собираюсь переписывать канву, я указал ихний ресайз как пример.
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Интересные статьи из справочника
Поможем написать учебную работу
Отвечай на вопросы, зарабатывай баллы и трать их на призы.
Подробнее
Подробнее
Для правильного ресайза прямоугольника и картинки после кропа, вам необходимо правильно расчитать новые размеры и координаты картинки внутри прямоугольника.
Чтобы это сделать, вы можете использовать следующую формулу:
Рассчитайте соотношение сторон исходной картинки (aspect ratio) как отношение ширины к высоте: aspectRatio = originalImageWidth / originalImageHeight.
После кропа, рассчитайте новые размеры и координаты картинки внутри прямоугольника следующим образом:
Новая ширина картинки: newImageWidth = cropWidth.Новая высота картинки: newImageHeight = cropWidth / aspectRatio.Новая координата X картинки: newImageX = (originalImageX - cropX) * (newImageWidth / cropWidth)Новая координата Y картинки: newImageY = (originalImageY - cropY) * (newImageHeight / cropHeight)Примените новые размеры и координаты картинки к элементу img.template-element-content.
Надеюсь, эти расчеты помогут вам правильно подстроить картинку под прямоугольник после кропа. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.