Вопрос по javascript, jquery – Динамически расположить некоторые элементы по кругу

38

Я ищу функцию для размещения некоторых элементов по кругу.
результат должен быть примерно таким:

enter image description here

только для 4 элементов или дляn элементы на одинаковом расстоянии? Neysor
@Neysorn элемент с разным расстоянием. Omid
@camus моя настоящая проблема в том, что я не знаю тригонометрии;) Omid

Ваш Ответ

4   ответа
0

Arrange Elements In Circle (Javascript)

function arrangeElementsInCircle (elements, x, y, r) {
    for (var i = 0; i < elements.length; i++) {
        elements[i].scaleX = 1 / elements.length
        elements[i].scaleY = 1 / elements.length
        elements[i].x = (x + r * Math.cos((2 * Math.PI) * i/elements.length))
        elements[i].y = (y + r * Math.sin((2 * Math.PI) * i/store.length))
    }
}

Где & lt;, код & gt; x, y является точечными координатами иelements массив элементов для размещения иr это радиус.

11

x, y), расстояниеrцентр элемента должен быть расположен в:

(x + r cos(2kπ/n), y + r sin(2kπ/n))

гдеn это количество элементов, иk является "числом" элемента, который вы сейчас позиционируете (от 1 доn включительно).

Это помогло мне спасибо
xy означает то же самое, что иx * y в математике.
Какова формула для их размещения в эллипсе?
Я думаю, что вы пропустили* послеx + r, право ? Omid
73

Вот некоторый код, который должен вам помочь:

var numElements = 4,
    angle = 0
    step = (2*Math.PI) / numElements;
for(var i = 0; i < numElements.length; i++) {
    var x = container_width/2 + radius * Math.cos(angle);
    var y = container_height/2 + radius * Math.sin(angle);
    angle += step;
}

Это не полный, но должен дать вам хорошее начало.


Обновление: вот что действительно работает:

var radius = 200; // radius of the circle
var fields = $('.field'),
    container = $('#container'),
    width = container.width(),
    height = container.height(),
    angle = 0,
    step = (2*Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2),
        y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});

Демо-версия:http://jsfiddle.net/ThiefMaster/LPh33/
Вот этоулучшенная версия где вы можете изменить количество элементов.

Я действительно хочу узнать об этом. Не могли бы вы дать некоторые объяснения с математической формулой на ваш ответ. Довольно пожалуйста :)
Я обновил ответ, включив в него рабочий пример.
откуда ты знаешь, где находится цикл? Omid
Вам необходимо добавить координаты круга и вычесть половину размеров элемента изx а такжеy сам.
@ThiefMaster, Обычный алмаз после твоего имени, а ты все еще жадный ?? :П
5

Я объединил скрипку ThiefMaster с плагином jQuery pointAt:

Демо-версия:http://jsfiddle.net/BananaAcid/nytN6/

the code is somewhat like above.
might be interesting to some of you.

Похожие вопросы