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)

    };
}

函数的angle参数应为弧度的目标角度（在您的情况下为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>