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>