Попытка построить координаты вокруг края круга

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

http://jsfiddle.net/jE26S/1/

var iteration = 4;
var left = [94,200,104,-6];
var top = [-6,94,200,94];    

for(var i=0; i<iteration; i++){

    $("#center").append("<div class='point' style='left:"+left[i]+"px;top:"+top[i]+"px'></div>");    

}

Математика определенно не моя сильная сторона.

Мне нужно представить людей как маленькие Круги, стоящие вокруг большого круга. Однако будет случайное количество людей, и все они должны быть равноудаленными. Я не уверен, должен ли я работать из центральной точки.


javascript points math geometry
person user1503606    schedule 28.11.2012    source источник
comment
Работать из центральной точки — хорошая идея. Для круга с центром (a,b) и радиусом r положение точки на краю круга равно (a+r*cos(angle), b+r*sin(angle)). Здесь проблема SO, которая очень похожий на ваш.   -  person Kevin    schedule 28.11.2012

Ответы (1)


arrow_upward
35
arrow_downward

Предполагая, что (x0, y0) — это центр вашего круга, а r — радиус:

var items = 4;
for(var i = 0; i < items; i++) {

    var x = x0 + r * Math.cos(2 * Math.PI * i / items);
    var y = y0 + r * Math.sin(2 * Math.PI * i / items);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    

}
person John Ledbetter    schedule 28.11.2012
comment
Да, вы, вероятно, захотите вычесть ширину/высоту вашей точки в зависимости от того, в каком квадранте окажется результат. - person John Ledbetter; 28.11.2012
comment
Привет, Джон, не могли бы вы рассказать мне, как я могу настроить приведенный выше код так, чтобы все маленькие кружки были на одном уровне (просто соприкасаясь) друг с другом, то есть удаляя промежуток между маленькими кружками? спасибо - person user1503606; 07.12.2012
comment
Установите их диаметр равным значению длины окружности большого круга, деленному на количество маленьких кругов. - person Lee Goddard; 22.01.2015