如何用3个给定点计算arcTo()的半径

How to calc the radius for arcTo() with 3 given points?

本文关键字：arcTo 计算 3个 何用      更新时间：2023-09-26

我有两个Points由一条线，起点和终点连接。

我想在它们之间画一个弧，但是半径应该是动态的，这取决于用户点击的位置。这样我就有了鼠标的第三个点，坐标是XY。

我如何画一个ctx.arcTo()，使结果线穿过一个特定的点(鼠标点)?

更新:这个答案实际上是错误的，请忽略它。圆弧的圆心不一定在A和b之间的中点

假设两个点是A和B，用户动态地提供点c。

找到A和b之间的中点，这将是圆的中心。从中心到点C的一条直线就是圆弧的半径。

计算A和B之间的中点坐标(圆心)

计算点C和这个中心点之间的距离。这是半径

计算A、B、C点随机位置不缠绕曲线的最大允许半径(假设用arcTo方法从A点经C点画到B点)

//calculate distance between points and find the smallest one
 const dAC = distance(pointA, pointC);
 const dBC = distance(pointB, pointC);
//calculate angle between ACB (C is vertex)
 const anglePoints = findAngle(pointA, pointC, pointB);
// calculate radius
 const r = Math.ceil(Math.min(dAC, dBC) * Math.abs(Math.tan(anglePoints / 2)));
 ctxChart.arcTo(pointC.x, pointC.y, pointB.x, pointB.y, r);
function distance(p1: Point, p2: Point): number {
    const xDelta = (p2.x - p1.x);
    const yDelta = (p2.y - p1.y);
    const d = Math.sqrt(xDelta * xDelta + yDelta * yDelta);
    return d;
}
function findAngle(A: Point,B: Point,C: Point) {
    var AB = Math.sqrt(Math.pow(B.x-A.x,2)+ Math.pow(B.y-A.y,2));    
    var BC = Math.sqrt(Math.pow(B.x-C.x,2)+ Math.pow(B.y-C.y,2)); 
    var AC = Math.sqrt(Math.pow(C.x-A.x,2)+ Math.pow(C.y-A.y,2));
    return Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB));
}

有答案的链接，帮助我计算正确的半径值797891年https://math.stackexchange.com/questions/797828/calculate-center-of-circle-tangent-to-two-lines-in-space/797891

相关文章：