Получить координаты конечной линии в javascript на основе начальных координат и предварительно определенного угла - PullRequest
Новая
       25

Получить координаты конечной линии в javascript на основе начальных координат и предварительно определенного угла

1 голос
/ 31 января 2020

У меня есть проблема, когда я рисую SVG-линии при каждом щелчке, мне нужно рисовать только горизонтальные / вертикальные линии (90 градусов) или 45 градусов. линия. Горизонтальная / вертикальная проблема, которую я уже решил, где я застрял, рисует 45 градусов. линии, если я знаю следующую информацию: startCoordX, startCoordY, endCoordX, endCoordY, angle (положительный 45deg или отрицательный -45deg. В основном мне нужно просто настроить endCoordinates, чтобы они образовали линию угла + -45deg с начальными координатами. Пока что я вычисляю угол между двумя точками следующим образом: 

angle(startx, starty, endx, endy) {
        var dy = endy - starty;
        var dx = endx - startx;
        var theta = Math.atan2(dy, dx); // range (-PI, PI]
        theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
        //if (theta < 0) theta = 360 + theta; // range [0, 360)
        return Math.abs(theta) > 90 ? theta % 90 : theta;
}

Есть идеи, как мне этого добиться? Мне нужна другая функция, которая вернет мне конечные координаты X и Y, чтобы нарисовать линия ...

1 Ответ

1 голос
/ 03 февраля 2020

См. Этот ответ: { ссылка }

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

При этом вы можете назвать его с 45 в качестве 4-го аргумента, то есть: 

const pos = polarToCartesian(startx, starty, radius, 45)

Это требует от вас знать радиус, который вы хотите нарисовать. Или вы можете получить его из своей функции, например: 

angle(startx, starty, endx, endy) {
        const dy = endy - starty;
        const dx = endx - startx;
        const radius = Math.sqrt(dy**2 + dx**2);
        const pos = polarToCartesian(startx, starty, radius, 45);
        let theta = Math.atan2(dy, dx); // range (-PI, PI]
        theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
        //if (theta < 0) theta = 360 + theta; // range [0, 360)
        return Math.abs(theta) > 90 ? theta % 90 : theta;
}

Важными строками являются const radius = Math.sqrt(dy**2 + dx**2);, за которыми следует const pos = polarToCartesian(startx, starty, radius, 45)

Я предполагаю, что вы хотите изменить свой окончательный возврат, чтобы проверить, текущая тета ближе к 45, чем к 0 или 90? И тогда, если это так, нарисуйте 45-градусную линию вместо этого?

Есть вопросы, или, если я неправильно понял вашу цель, пожалуйста, дайте мне знать.

...