javascript - JS 圆环图/百分比乱序

Question

我在这上面耗费了太多时间，所以我来找你。

我正在尝试生成一个用户头像，其周围有一个 SVG donut ，以百分比表示其个人资料的完整性。

简单。

不幸的是，设计要求百分比标 checkout 现在 donut 外面，在笔划的末端。

很难。

我发现由于圆心不像在图形中那样位于 0,0，我可以通过假设半径是直 Angular 三 Angular 形的斜边来找到 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

三 Angular 函数使用弧度，而不是度数。一个圆有 2π 弧度，而不是 360。所以把它改成:

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