JS переместить точку на угол по окружности

Question

У меня есть программа, в которой я нажимаю три раза, каждый щелчок создает точку на холсте. Затем я вычисляю угол между этими тремя точками следующим образом:

function find_angle(A, B, C) {
    var AB = Math.sqrt(Math.pow(B.x - A.x, 2) + Math.pow(B.y - A.y, 2));
    var BC = Math.sqrt(Math.pow(B.x - C.x, 2) + Math.pow(B.y - C.y, 2));
    var AC = Math.sqrt(Math.pow(C.x - A.x, 2) + Math.pow(C.y - A.y, 2));
    return Math.acos((BC * BC + AB * AB - AC * AC) / (2 * BC * AB));
}

В приведенном выше примере изображения рассчитанный угол составляет 93 °. Мне нужно переместить point 3 на -3 °, чтобы точки составляли ровно 90 °. У меня есть эта функция для него:

var angleToCorrect = alpha * (Math.PI / 180) - 90 * (Math.PI / 180);
correct_angle(point2, point3, angleToCorrect)

...

function correct_angle(p2, p3, angle) {

    var x = p2.x - p3.x;
    var y = p2.y - p3.y;
    var r = Math.sqrt(x * x + y * y); //circle radius. origin of the circle is point 2


    return {
        X: p2.x + (Math.cos(angle) * r),
        Y: p2.y + (Math.sin(angle) * r)

    };

}

Теперь эта функция должна возвращать новые x и y для point 3 с исправленным углом до 90 °. Все же координаты не согласуются с тем, что я ожидаю. Может кто-то указать, что я делаю не так?

Answer 1

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

Так что внутри этой функции вы должны выяснить, какой текущий уголвектор между точкой 1 и точкой 2 есть.Javascript предлагает изящную встроенную функцию для этого Math.atan2() Теперь, когда мы знаем угол (в радианах), нам нужно добавить новый угол к нему.Это гарантирует, что мы можем правильно разместить точку 3.

function correct_angle(p1, p2, p3, angle)
{
    var currentAngle=Math.atan2(p1.y-p2.y, p1.x-p2.x);

    currentAngle+=angle;

    var x = p2.x - p3.x;
    var y = p2.y - p3.y;
    var r = Math.sqrt(x * x + y * y);

    return {
        X: p2.x + (Math.cos(currentAngle) * r),
        Y: p2.y + (Math.sin(currentAngle) * r)

    };
}

Параметром угла функции должен быть целевой угол в радианах (в вашем случае 90 или 1,5707963267949)

Вот интерактивный пример:

Point = function(x, y) {
  this.x = x;
  this.y = y;
}

var pointA = new Point(162, 39);
var pointB = new Point(105, 161);
var pointC = new Point(211, 242);

var context = document.getElementById("canvas").getContext("2d");

function correct() {
  var newPoint = correct_angle(pointA, pointB, pointC, 1.5707963267949);
  pointC.x = newPoint.X;
  pointC.y = newPoint.Y;
  draw();
}

function correct_angle(p1, p2, p3, angle) {
  var currentAngle = Math.atan2(p1.y - p2.y, p1.x - p2.x);

  currentAngle += angle;

  var x = p2.x - p3.x;
  var y = p2.y - p3.y;
  var r = Math.sqrt(x * x + y * y);

  return {
    X: p2.x + (Math.cos(currentAngle) * r),
    Y: p2.y + (Math.sin(currentAngle) * r)

  };
}

function draw() {
  context.clearRect(0, 0, 400, 300);
  context.fillStyle = "red";
  context.beginPath();
  context.arc(pointA.x, pointA.y, 10, 0, 2 * Math.PI);
  context.fill();

  context.beginPath();
  context.arc(pointB.x, pointB.y, 10, 0, 2 * Math.PI);
  context.fill();

  context.beginPath();
  context.arc(pointC.x, pointC.y, 10, 0, 2 * Math.PI);
  context.fill();
}

draw();

<canvas id="canvas" width="400" height="300" style="background-color:#dddddd;"></canvas>
<button onclick="correct()" style="float:left">
correct me
</button>