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

Question

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

Я не собираюсь переписывать канву, я указал ихний ресайз как пример.

Answer 1

[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'; 
      }

Comments

[thehighhomie]

ааа)) спасибо)) я очень рад вас видеть))) я проверю через минут 50 и отпишу вам)

[thehighhomie]

Получилось проверить быстрее))) Вы снова правы!) все работает. странно то, что я тоже пробовал сделать по аналогии с предыдущим вопросом, на который вы отвечали, но у меня это не работало.
А замудрено конечно хорошо, это можно сказать черновик, я не имею опыта написания таких библиотек, это обкатка. Это все будет переписываться) спасибо вам добрый Человек)

Answer 2

[asd111]

не мудри. используй канвас. там это делается в пару строк без расчетов.

Comments

[thehighhomie]

а пример этих пары строк можно?

[asd111]

thehighhomie, погугли canvas crop resize

[thehighhomie]

asd111, да все уже)