javascript - 如何求圆弧的第二个 Angular

Question

我有一个包含两个 Angular 圆弧。我只知道 Angular 1 及其位置 (x1, y1) 和 Angular 2 位置 (x2, y2)。但我不知道 Angular 2、中心位置和半径等。

请引用下图以了解我的要求。

是否可以找到Angle-2值。请建议我找到解决方案的公式。

谢谢， 巴拉蒂。

Answer 1

由于给定的答案使解决方案保持开放状态，因此并不是每个人都知道如何求解联立方程。 MBo的答案可以写成如下

给定 x1、y1 和 x2、y2 以及 Angular a从未知圆心到点x1,y1求圆心以及与x2的 Angular angle ,y2 到中心点。

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到中心点的 Angular 为

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>