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 строке, там в основном комментарии с пояснениями.

Я не собираюсь переписывать канву, я указал ихний ресайз как пример.
  • Вопрос задан
  • 115 просмотров
Решения вопроса 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
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы