Динамическое вычисление SVG Path для полного круга с помощью JavaScript

Question

Динамическое вычисление SVG Path для полного круга с помощью JavaScript

1

Я пытаюсь нарисовать периметр круга в зависимости от угла, введенного пользователем. Угол определяет завершение периметра: 360 ° - полный круг, 180 половина круга и т.д.

Моя проблема: учитывая радиус, угол и центральные координаты круга, как я могу динамически вычислить путь по периметру?

Я знаю, что это, вероятно, базовая математика, но все, что я пробовал до сих пор, не сработало.

Вот моя скрипка: https://jsfiddle.net/Hal_9100/L311qq88/. Моя проблема заключается в нахождении правильной формулы для координат x и y пути:

var x = i * (radius * Math.cos(angle)) + centerX;
var y = i * (radius * Math.sin(angle)) + centerY;

Неужели я все здесь не так?

Вот пример того, что я пытаюсь сделать: обратите внимание, что нужно нарисовать только черный периметр: я просто использовал пунктирные красные линии, чтобы дать наглядный пример того, как должен быть нарисован периметр в зависимости от значения, данного пользователь.

Hal_9100 06 июнь 2017, в 05:08

Источник

Теги:

javascript

svg

math

path

1 ответ

Ещё вопросы

KevB · Accepted Answer · 2017-06-06T01-17-00.000Z

Да, проблема в вашей математике. Вот правильный способ вычисления пар координат x, y (обратите внимание, что итерация от нуля до требуемого угла, а не от нуля до радиуса):

for (var i = 0; i <= angle; i++) {
        var x = (radius * Math.cos((i-90)*Math.PI/180)) + centerX;
        var y = (radius * Math.sin((i-90)*Math.PI/180)) + centerY;

Ваша скрипка отлично работает, если вы замените эти три строки.