Как реализовать сужение\растяжение отрезка с двумя точками в JS CANVAS?

Question

[Alex]

Есть две точки в Canvas. Цель JS функцией регулировать их смещение от друг друга в сторону увеличения или уменьшения.
Сейчас JS функция прибавляет\убавляет значение X каждой точки в зависимости от расположения(т.е. если мы сужаем расстояние то левая точка смещается с плюсом, права с минусом и растяжение тоже самое наоборот).
Однако это работает если обе точки в одном горизонте т.е. отрезок между ними параллелен верхней горизонтальной границе canvas.
Собственно вопрос, как рассчитать пропорцию смещения Xn и Yn точек в зависимости от угла отрезка между ними по отношению к горизонту холста. Если я конечно вообще правильно выбрал направление для решения этой задачи, может есть еще какие то идеи. Сейчас пока на ум приходит что то подобное, т.е. считаем угол и значение на которое нужно прибавить\убавить позицию делим в пропорции между Х и Y в зависимости от угла от горизонта.

Comments

[ksnk]

В смысле - нужно увеличивать длину отрезка, не меняя угол наклона ?
Вектор задается парой значений. Разница координат X и разница координат Y отрезка. Соответственно, увеличивать-уменьшать - это изменять обе координаты одновременно, пропорционально вектору.
Собственно и вся наука. Тригонометрия не нужна, в смысле - для решения нужна, наверное, но результат достижим умножением-делением...

Answer 1

[Rsa97]

Находите среднюю точку и начальное смещение
Xc = (X1 + X2) / 2
Yc = (Y1 + Y2) / 2
dX = Xc - X1
dY = Yc - Y1
Затем просто домножаете смещение на коэффициент растяжения и прибавляете/вычитаете от центральной точки
X1' = Xc - dX * k
Y1' = Yc - dY * k
X2' = Xc + dX * k
Y2' = Yc + dY * k
Коэффициент k = 1 соответствует начальному положению точек

Comments

[Alex]

Благодарю за формулу!