使用JavaScript查找三角形中的第三点

好的，我需要在JavaScript中找出如何在三角形上绘制第三个点。见下图

A和B将是随机点（可能是正的，也可能是负的，这取决于它们相对于0,0原点的位置。）

因此A和B是已知的点（x和y）

我已经知道如何根据A和B绘制C

我想要控制的C和D之间的距离。例如，我想说“C和D之间的距离现在是20px…D在哪里？”

所以我想，举例来说，我们可以说C&D之间的距离是20px。这意味着我有CD和CB，但没有DB。我也知道C（x，y）和B（x，y）

我现在需要找到D。。。我不懂数学，所以请像我5岁一样给我解释一下。我已经在谷歌上搜索了很多次，尝试使用了很多例子，但我还是迷路了。。。例如：我看到一些提到φ的方程。。什么是phi？如何在JavaScript术语中使用phi等

总结：

A(x,y) is known (randomized)
B(x,y) is known (randomized)
C(x,y) is known (midpoint of AB)
CB is known (using distance formula)
CD = 20 pixels (or whatever I set it to).
DB = ???
D(x,y) = ???

这是我到目前为止得到的，但可能是错的

var Aeh = {x:50, y:75};
    var Bee = {x:300, y:175};
    var Cee = {x:0, y:0};
    var Dee = {x:0, y:0};

    window.onload = function(){ 
         refreshPoints();
         solveForC();
    } 
    function refreshPoints(){
        TweenLite.set("#pointA", {x:Aeh.x, y:Aeh.y});
        TweenLite.set("#pointB", {x:Bee.x, y:Bee.y});
        TweenLite.set("#pointC", {x:Cee.x, y:Cee.y});
        TweenLite.set("#pointD", {x:Dee.x, y:Dee.y});
    }
    function solveForC() {
        Cee.x = (Bee.x + Aeh.x)/2;
        Cee.y = (Bee.y + Aeh.y)/2;
        refreshPoints();
        solveForD();
    }
    function solveForD() {
        // Dee.x = AB * Cos(Φ) + x_1
        // Dee.y = AB * Sin(Φ) + y_1

        Dee.x = (Cee.x+Bee.x/2) * Math.cos((1 + Math.sqrt(5)) / 2) + Cee.x;
        Dee.y = (Cee.y+Bee.y/2) * Math.sin((1 + Math.sqrt(5)) / 2) + Cee.y;

        refreshPoints();
    }

有A、B和C（中点），你知道从C到D的距离是设定的（比如说20），从C到D的直线与从A到B的直线成直角。你可以用这个方法找到D的两个解。最简单的理解方法是求A到B的线的角度，并用它来帮助计算D

var angleAB = Math.atan2(B.y - A.y, B.x - A.x);
// to get the angle of the line from C to D, add 90 degrees
// in radians, that is Math.PI / 2
var angleCD = angleAB + Math.PI / 2;

// now you can calculate one of D's solutions
// the 20 represents your distance from C to D, and can be changed if desired.
DeeOne.x = C.x + 20 * Math.cos(angleCD);
DeeOne.y = C.y + 20 * Math.sin(angleCD);

// a second solution can be found by going in the other direction from C
DeeTwo.x = C.x - 20 * Math.cos(angleCD);
DeeTwo.y = C.x - 20 * Math.sin(angleCD);

如果您只需要与图表保持一定的距离（等），那么可能有一些方法可以减少这种计算。希望这能有所帮助。

一个更快更准确的替代解决方案。 函数从线

A

，

B

的中点查找点

dist

D

位于行的左侧

AB

如果

left=1

（默认），否则

D

位于行的右侧如果

left=-1

function findD(A, B, dist, left = 1){ // if left = 1 the D is left of the line AB 
    const nx = B.x - A.x;
    const ny = B.y - A.y;
    dist /= Math.sqrt(nx * nx + ny * ny) * left;
    return {
        x : A.x + nx / 2 - ny * dist, 
        y : A.y + ny / 2 + nx * dist
    }
}

您可能会尝试将

Math.sqrt（nx*nx+ny*ny）

替换为

Math.hypot（nx，ny）

，并保存两个乘法和一个加法。但是

hypot

的速度非常慢。使用

sqrt

功能时，当我使用

hypot

时，每秒执行1000万次，下降到200万次。还对另一个答案进行了计时（为了公平起见进行了优化），其峰值为每秒340万个解决方案

---

对于使用

atan2

和

sin

和

cos

的javascript来说，问题不大，因为64位双精度浮点使这些函数引入的误差很小，在最长边的±1e-14*长度范围内，但误差可以减小（一点）如果您避免使用这些函数

您是否尝试过任何代码？我尝试了上面发布的代码，这些代码基于其他人在网上发布的一些公式。我有点像在黑暗中拍摄，因为我不懂数学。你需要知道C和A或B之间的距离，除非C是AB的中点？我们还需要知道AB D的哪一边，否则会有两种解决方案。C是中点，所以我可以很容易地找到C和B之间的距离。我希望能够随机地将D翻转到任意一边，所以，我不确定这将如何工作。。我想我需要两种解决方案。。总结：A是已知的（随机的）B是已知的（随机的）C=已知的（AB的中点）CB是已知的CD=20像素（或我设置的任何值）。DB=？？？天哪，非常感谢你！！！它起作用了。。然而，我应该注意到Math.atan2返回“NaN”，但Math.tan似乎有效。。这两者之间有重要区别吗？或者“tan”对我也有同样的作用吗？

atan

和

atan2

几乎是等价的。。。我认为在某些情况下（当A和B具有相同的x坐标时），

atan2

将起作用，但

atan

将中断。但如果它起作用，那就太好了！如果你想非常小心的话，确保当A和B有相同的x坐标时它能工作。哦，我刚刚发现了为什么atan2很有趣。atan接受一个带有num/denom的参数，但atan2单独使用它们。所以我应该写

Math.atan2（（B.y-A.y），（B.x-A.x））

而不是

Math.atan2（（B.y-A.y）/（B.x-A.x））

。如果可以，我会编辑。。。