В чем может быть причина странного поведения отрезка на оси координат?

Question

[Destell]

Код

Инвертировал значения top, сделав правую сторону окна аналогом OY (возможно, умнее было бы использовать bottom).

Вычислил по формуле длину отрезка, где x1 y1 заданы top left позициями линии, x2 y2 - координаты курсора на экране.

По спертой с сайта-конвертера формуле высчитал угол между отрезком и OX, перевел в градусы

spoiler

getAngularCoefficient: function(x1, y1, x2, y2) {
            let r = y2 - y1,
                r1 = x2 - x1,
                res,
                angular;
            
            if (r == 0 && r1 == 0) {
               res = 0;
               
            } else if (r != 0 && r1 == 0) {
               res="Infinity";
               
            } else {
               let res1 = (+r) / (+r1);
               res = Math.round(1000 * res1) / 1000;
            };
            
            angular = _methods.getAngular(res);
            
            _methods.setLineDeg($LINE, angular);
         },

Дальше начался геморрой, на котором я завис, проще посмотреть на самом примере.
Единственный участок, на котором отрезок ведет себя нормально - сектор Х, -Y
В секторе X Y отрезок бьется в конвульсиях.
В остальных секторах все не намного лучше, но там хотя бы очевидна причина - инвертируется знак значения угла.

Comments

[Армянское Радио]

Лучше напишите, что вам нужно сделать

[Destell]

Армянское Радио, линия в своей конечной точке должна постоянно следовать за курсором, сохраняя координаты стартовой точки.

Answer 1

[AngReload]

Я так понял, что вы пытаетесь получить координаты точки в которой начинается линия, с помощью этого кода:

let coords = {
                  x1: line.offset().left,
                  y1: Math.abs(line.offset().top - wHeight)
               };

Если вы добавите после этих строк console.log(coords) то увидите в консоли разработчика цифры меняющиеся от положения курсора. А ведь начало линии не изменяется, значит тут ошибка.

Я заменил ваш код на такой:

let coords = {
                  x1: 10,
                  y1: wHeight / 2
               };

И похоже, у вас ещё есть ошибка где-то в определении направления угла.

Answer 2

[Армянское Радио]

Для этой задачи не нужны трюки с углами. Исходные данные -
Xm Ym - координаты мыши
Xc Yc - координаты "центра" - откуда растет линия

находим направление от центра до курсора N={Xm-Xc;Ym-Yc}

теперь делаем вектор единичной длины {Xv, Yv} = {Xm-Xc;Ym-Yc} /sqrt( (Xm-Xc)^2 + (Ym-Yc)^2 )

теперь "удлиняем" наш вектор до нужной нам длины {Xr,Yr}={Xv*L;Yv*L}

Ну и рисуем Line(Xc, Yc, Xc+Xr,Yc+Yr)

Comments

[AngReload]

так он ведь не рисует, а реально применяет transform rotate к элементу страницы. Проще конечно, было бы просто рисовать в канвасе или svg

[Армянское Радио]

AngReload, тогда нужно просто использовать atan2( Ym-Yc, Xm-Xc)

[Destell]

Армянское Радио, попробовал использовать эту формулу. В нижней части экрана появилось расхождение "конечной" точки отрезка, в верхней части то же судорожное дергание.

Ссылка