使用JavaScript在Triangle中查找第三点 [英] Finding 3rd point in Triangle using JavaScript
问题描述
好的,所以我需要在JavaScript中弄清楚如何在三角形上绘制第三个点。参见下图。
Ok so I need to figure out in JavaScript how to plot a third point on a triangle. See diagram below.
A和B将是随机点(根据它们相对于0,0的原点而定,可能为正或负)。
A and B will be randomized points (may be positive or negative depending on where they fall relative to the 0,0 origin.)
因此,A和B是已知点(x和y)。
thus A and B are known points (x and y).
我已经弄清楚如何根据A绘制C
I already figured out how to plot C based on A and B.
C和DI之间的距离要控制。例如,我想说 C和D之间的距离现在是20px ... D在哪里?
The distance between C and D I want control over. for example I want to say "The distance between C and D is now 20px... where is D?"
所以我想举个例子,我们可以说C& D之间的距离将为20px。那意味着我有CD和CB,但没有DB。我也知道C(x,y)和B(x,y)。
So I guess for example purposes we can say that the distance between C&D will be 20px. That means I have CD and CB, but not DB. I also know C(x,y) and B(x,y).
我现在需要找到D ...我不是数学家,所以请像我5岁时向我解释一下。 ,尝试使用多个示例,但我仍然迷路...例如:我看到提到了一些带有phi的方程..什么是phi?
I need to find D now... I'm not a math mind so please explain it to me like I'm 5. I've googled it multiple times, attempted to use multiple examples, and I'm still lost... For example: I saw some equations with phi mentioned.. what is phi? How do I use phi in JavaScript terms, etc...
摘要:
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) = ???
这是我到目前为止的内容,但这可能是错误的。。
Here's what I have so far, but it's probably wrong..
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。
You have A, B and C (the midpoint), you know the distance from C to D is set (say at 20), and the line from C to D is at right angles to the line from A to B. You can find two solutions for D using this. The simplest way to understand is to find the angle of the line from A to B, and use that help calculate 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);
如果您需要的只是一定距离(例如, )。希望这会有所帮助。
There might be ways to cut out some of this calculation if all you need is a certain distance (etc) from the diagram. Hope this helps.
这篇关于使用JavaScript在Triangle中查找第三点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!