JS甜甜圈图w /乱序

Question

我为此花了很多时间，所以我来找你。

我正在尝试生成一个用户化身，该化身周围有一个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％时会发生这种情况

很明显，我正在做正确的事情，因为它会产生弧，但是顺序不正确。

Answer 1

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

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