Javascript JS油炸圈饼图，带百分比故障

我已经为此浪费了太多时间，所以我来找你

我试图生成一个用户化身，它周围有一个SVG甜甜圈，以百分比表示其配置文件的完整性

简单

不幸的是，设计要求百分比标签在笔划结束时出现在油炸圈饼的外面

困难

我想，因为圆心不是像在图形中那样在0,0，我可以通过假设半径是直角三角形的斜边来找到x和y坐标，并且支腿和半径的总和将等于相应的坐标，这似乎是真的。我正以这种方式成功地绘制一条弧

然而，我的数学真的有点怪，而且百分比似乎有问题

这是我的代码：

 findPercentagePosition( percentage ){
    let q = 1,
    angle = ( percentage / 100 * 360 );

    const C = 90,
    A = angle,
    B = Math.abs( C - A ), 
    c = this.arc.radius, // hypotenuse
    a = Math.abs( c * Math.sin( A ) ), //r*sin( angle )
    b = Math.sqrt( Math.pow( c, 2 ) - Math.pow( a, 2 ) ), // b^2=c^2-a^2
    CENTER = c + this.arc.strokeWidth + this.arc.offset;

    return {
        x: b + CENTER,
        y: a + CENTER
    };
}

这就是我尝试渲染0%到24%时发生的情况。

---

很明显，我在做一些正确的事情（ish），因为它生成了一个圆弧，但顺序不对。

三角函数使用弧度，而不是度。一个圆有2π弧度，而不是360度。因此，将其更改为：

const angle = percentage/100 * 2 * Math.PI;
const C = Math.PI/2;

---

那很有效，谢谢你！我觉得自己很愚蠢，但你帮我省了很多时间，让我不知道我错在哪里了。