thehighhomie
@thehighhomie

Математические расчеты при кроп-ресайзе элементов с разными пропорциями?

Здравствуйте! Пишу приложение, в котором есть кроп с ресайзом. Застопорился на ресайзе после кропа, не могу разобраться с расчетами при ресайзе, у прямоугольника который растягивается и картинки, которая должна подстраиваться под этот прямоугольник.

С обычным ресайзом проблем нет, а вот после кропа, размеры и пропорции у картинки и прямоугольника меняются.

Если вам не очень интересно читать то что я написал ниже то сразу к делу:
Мне нужна помощь с расчетами ресайза двух элементов - прямоугольника, который растягивается и картинкой внутри него. Из за разных размеров прямоугольника и картинки после кропа, я не могу найти нужную формулу для правильной подстановке картинки под прямоугольник. В конце ссылки на видео и код.

Как работает:
Итруктура элемента:
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 строке, там в основном комментарии с пояснениями.

Я не собираюсь переписывать канву, я указал ихний ресайз как пример.
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1
Griboks
@Griboks
Ну конечно намудрено чересчур. Ошибка исправляется достаточно просто:
if (img) {
        //Масштаб ресайза
	let scale = this.box.clientWidth/this.resizable.box.source.width;
        //Соответственно изменяется размер изображения
	img.style.height = img.sourceRect.height *scale + 'px';
        img.style.width = img.sourceRect.width *scale + 'px';
	let left = тут свойство css left изображения до ресайза
	let top = ...
        //Не забывает смещать положение изображения согласно масштабу
	img.style.top = top*scale+'px';
        img.style.left = left*scale+'px'; 
      }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@asd111
не мудри. используй канвас. там это делается в пару строк без расчетов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Digital Sharks Казань
от 60 000 до 65 000 руб.
NWCode Санкт-Петербург
от 110 000 руб.
MedPoint24 Москва
от 100 000 руб.