Я потратил на это слишком много часов, поэтому я прихожу к вам.
Я пытаюсь сгенерировать аватар пользователя, который окружен кольцом SVG, который обозначает полноту их профиля в процентах.
Easy.
К сожалению, дизайн требует, чтобы процентная метка появлялась вне пончика в конце штриха.
Сложно.
Я полагал, что, поскольку центр окружности не равен 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%
Очевидно, что я делаю что-то правильное (иш), потому что это порождает дугу, но только не в правильном порядке.