计算两点之间的SVG弧

Question

我有点X和A，A'，......坐标：
X [x,y]（是起点）
A [a,b]，A'[a',b']等（是结束点）

我也知道角度XCA，XCA'等等。

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

我尝试使用abs(x - a)和abs(y - b)计算半径X和半径Y.只有在使用90,180,270这样的角度时才能看起来很好。

然后我尝试计算切割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>

曲线由路径属性 M x ₀ ， y ₀ Q <定义i> x ₁ ， y ₁ x ₂ ，< i> y ₂ 其中 x ₀ ， y ₀ 是起点（X）， x ₁ ， y ₁ 是控制点（即圆的中心，C）， x ₂ ， y < / i> ₂ 是终点A.

如果想要更多地控制曲率，请改用立方贝塞尔曲线。它们有两个控制点，它们应该放在X和C之间以及C和A之间连接的直线上。如果你把它们放在C附近，你会得到更紧凑的曲线。

[JSFiddle link]

Answer 2

这是计算两点之间所有弧点的公式。

double x = centerX + length * Math.Cos(angle * Math.PI / 180);
double y = centerY + length * Math.Sin(angle * Math.PI / 180);

长度是从圆到你的点的长度。您可以将角度增加到+1并获得其他点并停止直到结束角度。