javascript - 使用 JavaScript 在三 Angular 形中查找第三个点

Question

好的，所以我需要在 JavaScript 中弄清楚如何在三 Angular 形上绘制第三个点。请参见下图。

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.. 什么是 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();
    }

Answer 1

您有 A、B 和 C(中点)，您知道从 C 到 D 的距离已设置(比如 20)，并且从 C 到 D 的线与从 A 到 B 的线成直 Angular 。您可以使用此找到 D 的两个解决方案。最简单的理解方法是找到从 A 到 B 的直线的 Angular ，并用它来帮助计算 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);

如果您只需要与图表保持一定距离(等)，则可能有一些方法可以减少一些计算。希望这会有所帮助。