Построение точек вокруг полуокружности с координатами xy

Question

Im пытается использовать forumla для преобразования градусов в координаты X и Y, так что я могу разместить точки вокруг окружности круга с помощью CSS с помощью «верхнего» и «левого», смещения.

Эти сообщения описывают trigonomic функции, чтобы помочь с этим:

• Find the point on a circle with given center point, radius, and degree
• Find the point with radius and angle

Десятки обысков держать воспитывая эту формулу:

X = r * cosine(angle) 
Y = r * sine(angle) 

Но я не могу заставить его работать в контексте моего сотрудничества де. Этот код:

// angle is amount in degrees that the point should be at 
// pieHeight is distance between bottom of semicircle and top of semicircle (i.e. radius) 
var angle = ((amount/range) * 180); 
offLeft = pieHeight + ((pieHeight) * Math.cos(angle)); 
offTop = (pieHeight/3) + ((pieHeight) * Math.sin(angle)); 
console.log(amount, angle, Math.round(offLeft), Math.round(offTop)); 

// Update display 
$(val).css('left', offLeft); 
$(val).css('top', offTop); 

Урожайность этого результата:

вывод консоли:

0 0 268 45 
20 36 117 -88 
40 72 4 79 
60 108 184 169 
80 144 251 -21 
100 180 54 -63 

Число в круговой дуге, как должно быть, но они не являются в порядке, и я не могу заставить их соответствовать только полукруге. Может кто-нибудь сказать мне, что я делаю неправильно?

Answer 1

Проблема в том, что Math.sin() и Math.cos() поднять угол в радианах. Я думаю, вы умножаетесь на 180, чтобы получить угол в градусах.

Попробуйте изменить

var angle = ((amount/range) * 180); 

с

var angle = ((amount/range) * Math.PI);