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

【问题标题】：How to calc the radius for arcTo() with 3 given points?如何用 3 个给定点计算 arcTo() 的半径？
【发布时间】：2013-04-05 06:48:22
【问题描述】：

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

我想在它们之间画一条弧线，但半径应该是动态的，具体取决于用户点击的位置。因此，我从鼠标中获得了第三个点，带有 XY 坐标。

如何绘制ctx.arcTo() 以使生成的线穿过特定点（鼠标点）？

【问题讨论】：

第三个点与曲线的关系是什么？你会画吗？
线条应该穿过由鼠标位置定义的第三个点（用户稍后应该能够拖动线条，并且在拖动时会改变圆弧半径）。
你可以转换this guy's C# code来解决这个问题

标签： java javascript gwt canvas

【解决方案1】：

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

假设A和B两点，用户动态提供C点。

找到 A 和 B 之间的中点。这将是圆的中心。从中心到 C 点的线就是你的圆弧的半径。

计算 A 和 B 之间的中点（圆心）的坐标。

计算点 C 到这个中心点的距离。这是半径。

【讨论】：

【解决方案2】：

计算A、B、C点的随机位置位置的最大允许不包曲线半径（假设我们用arcTo方法从A到B经过C点绘制。

//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));
}

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

【讨论】：