如何找到弧的第二个角
How to find the second angle of the Arc
我有一个包含两个角的圆弧。我只知道 Angle-1 及其位置 (x1, y1) 和 Angle-2 位置 (x2, y2)。但我不知道 Angle-2、中心位置和半径等。
请参考下图了解我的要求。
是否可以找到Angle-2值。请建议我找到解决方案的公式。
谢谢,
巴拉蒂.
据我了解这个问题:
您有位于圆上的点 (x1,y1),该点的半径形成角度 Fi。并且您还有位于同一个圆上的另一个点 (x2,y2)。
所以我们知道从第一个点到中心的方向
u = (-sin(fi), -cos(fi))
并且垂直于两点之间的线段的中间也是通过中心的线。请注意,并非第2点的所有位置都给出了解决方案。
所以你有第一行的参数方程
x = x1 - cos(fi) * t //eqs 1
y = y1 - sin(fi) * t
第二行
base point
mx = (x1 + x2) / 2
my = (y1 + y2) / 2
direction vector
dx = (-y2 + y1) / 2
dy = (x2 - x1) / 2
其参数方程
x = mx + dx * u //eqs 2
y = my + dy * u
求解方程组
x1 - cos(fi) * t = mx + dx * u
y1 - sin(fi) * t = my + dy * u
对于未知数 t,u 你会找到交点 C - 圆心
由于给定的答案在某种程度上使解决方案处于开放状态,因为并不是每个人都知道如何求解联立方程。 MBo的回答可以这样写
给定 x1
、y1
和 x2
、y2
以及从未知中心到点 x1
的角度 a
, y1
求圆心和x2
、y2
与圆心的夹角angle
。
mx = (x2 - x1) / 2;
my = (y2 - y1) / 2;
u = (cos(a) * my - sin(a) * mx) / (cos(a) * mx + sin(a) * my);
t = (my - mx * u ) / sin(a);
圆心为
cx = x1 + cos(a) * t;
cy = y1 + sin(a) * t;
x2
,y2
到中心点的夹角为
angle = a + atan(u) * 2;
请注意,正如 MBo 指出的那样,并非 x1
、y1
、x2
、y2
和 a
的所有值都有有效的解决方案。
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
function test (a,a1){
r = 100;
cx = 200;
cy = 200
x1 = cx + Math.cos(a) * r;
y1 = cy + Math.sin(a) * r;
// use a test angle x2,y2
x2 = cx + Math.cos(a1) * r;
y2 = cy + Math.sin(a1) * r;
mx = (x2 - x1) / 2;
my = (y2 - y1) / 2;
u = (Math.cos(a) * my - Math.sin(a) * mx) / (Math.cos(a) * mx + Math.sin(a) * my);
t = (my - mx * u ) / Math.sin(a);
u = Math.atan(u)*2;
// use calculated angle and radius to get the center point from x2,y2
cx = x2 - Math.cos(a + u) * t;
cy = y2 - Math.sin(a + u) * t;
ctx.clear();
// draw line from center to x1,y1
ctx.line(cx,cy,x1,y1);
// draw cross for calculated center and draw circle using calculated radius
ctx.cross(cx,cy,2,"blue");
ctx.strokeCircle(cx,cy,Math.abs(t))
// draw line from calculated center to x2,y2
ctx.line(cx,cy,x2,y2,2,"red");
// draw starting points
ctx.cross(cx,cy,2);
ctx.cross(x1,y1);
ctx.cross(x2,y2);
}
var angle = 0;
var angle2 = 0;
function update(timer){
angle += 0.01;
angle2 += 0.02;
test(angle,angle2);
requestAnimationFrame(update);
}
requestAnimationFrame(update);
// Some render functions to display the result.
ctx.strokeCircle = function(x,y,r){
ctx.beginPath();
ctx.moveTo(x + r,y);
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.stroke();
}
ctx.line = function(x,y,xx,yy,w=1,col="black"){
ctx.lineWidth = w;
ctx.strokeStyle = col;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(xx,yy);
ctx.stroke();
}
ctx.cross = function(x,y,w=1,col="black",size = 5){
ctx.line(x-size,y-size,x+size,y+size,w,col);
ctx.line(x+size,y-size,x-size,y+size,w,col);
}
ctx.clear = function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
}
canvas { border : 2px solid black; }
<canvas id="canvas"></canvas>
我有一个包含两个角的圆弧。我只知道 Angle-1 及其位置 (x1, y1) 和 Angle-2 位置 (x2, y2)。但我不知道 Angle-2、中心位置和半径等。
请参考下图了解我的要求。
是否可以找到Angle-2值。请建议我找到解决方案的公式。
谢谢, 巴拉蒂.
据我了解这个问题:
您有位于圆上的点 (x1,y1),该点的半径形成角度 Fi。并且您还有位于同一个圆上的另一个点 (x2,y2)。
所以我们知道从第一个点到中心的方向
u = (-sin(fi), -cos(fi))
并且垂直于两点之间的线段的中间也是通过中心的线。请注意,并非第2点的所有位置都给出了解决方案。
所以你有第一行的参数方程
x = x1 - cos(fi) * t //eqs 1
y = y1 - sin(fi) * t
第二行
base point
mx = (x1 + x2) / 2
my = (y1 + y2) / 2
direction vector
dx = (-y2 + y1) / 2
dy = (x2 - x1) / 2
其参数方程
x = mx + dx * u //eqs 2
y = my + dy * u
求解方程组
x1 - cos(fi) * t = mx + dx * u
y1 - sin(fi) * t = my + dy * u
对于未知数 t,u 你会找到交点 C - 圆心
由于给定的答案在某种程度上使解决方案处于开放状态,因为并不是每个人都知道如何求解联立方程。 MBo的回答可以这样写
给定 x1
、y1
和 x2
、y2
以及从未知中心到点 x1
的角度 a
, y1
求圆心和x2
、y2
与圆心的夹角angle
。
mx = (x2 - x1) / 2;
my = (y2 - y1) / 2;
u = (cos(a) * my - sin(a) * mx) / (cos(a) * mx + sin(a) * my);
t = (my - mx * u ) / sin(a);
圆心为
cx = x1 + cos(a) * t;
cy = y1 + sin(a) * t;
x2
,y2
到中心点的夹角为
angle = a + atan(u) * 2;
请注意,正如 MBo 指出的那样,并非 x1
、y1
、x2
、y2
和 a
的所有值都有有效的解决方案。
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
function test (a,a1){
r = 100;
cx = 200;
cy = 200
x1 = cx + Math.cos(a) * r;
y1 = cy + Math.sin(a) * r;
// use a test angle x2,y2
x2 = cx + Math.cos(a1) * r;
y2 = cy + Math.sin(a1) * r;
mx = (x2 - x1) / 2;
my = (y2 - y1) / 2;
u = (Math.cos(a) * my - Math.sin(a) * mx) / (Math.cos(a) * mx + Math.sin(a) * my);
t = (my - mx * u ) / Math.sin(a);
u = Math.atan(u)*2;
// use calculated angle and radius to get the center point from x2,y2
cx = x2 - Math.cos(a + u) * t;
cy = y2 - Math.sin(a + u) * t;
ctx.clear();
// draw line from center to x1,y1
ctx.line(cx,cy,x1,y1);
// draw cross for calculated center and draw circle using calculated radius
ctx.cross(cx,cy,2,"blue");
ctx.strokeCircle(cx,cy,Math.abs(t))
// draw line from calculated center to x2,y2
ctx.line(cx,cy,x2,y2,2,"red");
// draw starting points
ctx.cross(cx,cy,2);
ctx.cross(x1,y1);
ctx.cross(x2,y2);
}
var angle = 0;
var angle2 = 0;
function update(timer){
angle += 0.01;
angle2 += 0.02;
test(angle,angle2);
requestAnimationFrame(update);
}
requestAnimationFrame(update);
// Some render functions to display the result.
ctx.strokeCircle = function(x,y,r){
ctx.beginPath();
ctx.moveTo(x + r,y);
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.stroke();
}
ctx.line = function(x,y,xx,yy,w=1,col="black"){
ctx.lineWidth = w;
ctx.strokeStyle = col;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(xx,yy);
ctx.stroke();
}
ctx.cross = function(x,y,w=1,col="black",size = 5){
ctx.line(x-size,y-size,x+size,y+size,w,col);
ctx.line(x+size,y-size,x-size,y+size,w,col);
}
ctx.clear = function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
}
canvas { border : 2px solid black; }
<canvas id="canvas"></canvas>