Алгоритм пропорционального ресайза элемента?

Question

[thehighhomie]

Всем добрый день! Помогите пожалуйста довести до ума код: https://jsfiddle.net/7vuwcad1/7/

Написал код для ресайза элементов, все ок работало. Теперь понадобилось добавить возможность ресайза с сохранием пропорций при нажатии SHIFT. Я смог добиться пропорционального ресайза, но элемент прыгает сильно, поресайзите по разному, там видно будет, что элемент подпрыгивает, переходя с верхней точки н нижнюю и наоборот.

Для простоты я добавил только одну кнопку, мне нужно понять, как написать такой алгоритм и остальные кнопки я уже сам смогу добавить.

Answer 1

[Владимир Проскурин]

Вот фрагмент из моего проекта

if (isProportional) {
                        // Тянем за низ или вверх.
			if (changeHeight) {
				const rh = this.state.startParams.object.height / object.height; // Получаем соотношение начальной высоты к измененной
				object.width = this.state.startParams.object.width / rh; // полученное соотношение применяем для ширины
			} else if (changeWidth) { // Тянем влево или вправо
				const rw = this.state.startParams.object.width / object.width; // Получаем соотношение начальной ширины  к измененной
				object.height = this.state.startParams.object.height / rw; // полученное соотношение применяем для высоты
			}
		}

Comments

[thehighhomie]

я не совсем понимаю как его переписать в мой код, вы сможете поправить фидл, если вам не затруднительно конечно?

[Владимир Проскурин]

thehighhomie, просто оставьте

if (keepAspectRatio) {
      rangeX = rangeY * aspectRatio
    }

https://jsfiddle.net/7vuwcad1/9/

[thehighhomie]

Владимир Проскурин, оно по одной оси) я по двум хотел) хорошо) спасибо)