javascript - 计算两点之间的 SVG 弧

Question

我有点 X 和 A, A',... 坐标:
X [x,y](是起点)
A [a,b], A'[a',b']等(是终点)

我还知道 Angular XCA、XCA'等

我找不到计算弧的公式，类似于图片上的弧，连接点 X 和其他 A 点。

我尝试使用 abs(x - a) 和 abs(y - b) 计算半径 X 和半径 Y。只有在使用 90、180、270 等 Angular 时才看起来不错。

然后我尝试计算切割X 和A 的内切圆的半径。但是弧从 X 流向 A 时看起来仍然不“自然”。

非常感谢。

PS:上图显示了某种想要的状态(我是徒手画的)。灰线仅用于定位。

编辑 ==========================

我发现内切圆选项效果很好，但我不知道如何确定何时将 large-arc-flag 用作 1 以及何时作为 0(与 sweep-flag 相同的问题)

Answer 1

在我看来，二次贝塞尔曲线是最简单的解决方案。这是一个例子:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="400" height="400" version="1.0">
    <g transform="translate(200 200)">
        <circle cx="0" cy="0" r="150" stroke="#000" fill="none" />
        <path d="M0,-150 Q0,0 106.066,-106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 106.066,106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 -106.066,106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 -106.066,-106.066" fill="none" stroke="red" stroke-width="3" />
    </g>
</svg>

曲线由路径属性Mx₀,y₀ Q< i>x₁,y₁ x₂,< i>y₂ 其中x₀,y_>0为起点(X)，x₁,y₁ 为控制点(即圆心C)，x₂,y₂是终点A。

如果您想更好地控制曲率，请改用三次贝塞尔曲线。它们有两个控制点，应放置在连接 X 和 C 以及 C 和 A 之间的直线上。如果将它们靠近 C，则会得到更紧的曲线。

[JSFiddle link]