【问题标题】：Dynamically arrange some elements around a circle围绕一个圆圈动态排列一些元素
【发布时间】：2012-04-14 09:08:11
【问题描述】：

我正在寻找一个函数来围绕一个圆圈排列一些元素。
结果应该是这样的：

【问题讨论】：

@camus 我真正的问题是我不懂三角学；）
仅适用于 4 个元素或相同距离的 n 元素？
@Neysor n 不同距离的元素。

【解决方案1】：

这里有一些可以帮助你的代码：

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/
这是一个improved version，您可以在其中更改元素计数。

【讨论】：

你怎么知道循环在哪里？
你需要自己加上圆的坐标，减去元素的一半尺寸，x和y自己。
我真的很想了解这个。您能否用数学公式对您的答案进行一些解释。漂亮请:)
@Starx：听起来像是值得赏金的东西；）
@ThiefMaster，你的名字后面有一颗钻石，你还贪心吗？？ :P

【解决方案2】：

对于围绕中心在 (x, y)、距离 r 处的元素，该元素的中心应位于：

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

其中 n 是元素的数量，k 是您当前定位的元素的“数量”（介于 1 和 n em> 包括在内）。

【讨论】：

xy 与数学中的x * y 含义相同。
将它们放在椭圆中的公式是什么？

【解决方案3】：

我已经将 ThiefMaster 的 fiddle 与 jQuery pointAt 插件结合起来了：

演示：http://jsfiddle.net/BananaAcid/nytN6/

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

【讨论】：

【解决方案4】：

按圆圈排列元素 (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))
    }
}

x,y 是点坐标，elements 是要放置的元素数组，r 是半径。

【讨论】：

【解决方案5】：

小偷大师回答的纯Javascript版本

function distributeFields(deg){
  deg = deg || 0;
  var radius = 200;
  var fields = document.querySelectorAll('.field'), //using queryselector instead of $ to select items 
      container = document.querySelector('#container'),
      width = container.offsetWidth,  //offsetWidth gives the width of the container
      height = container.offsetHeight,
      angle = deg || Math.PI * 3.5,
      step = (2 * Math.PI) / fields.length;
      console.log(width, height)
      
     //using forEach loop on a NodeList instead of a Jquery .each, 
     //so we can now use "field" as an iterator instead of $(this)

      fields.forEach((field)=>{
        var x = Math.round(width / 2 + radius * Math.cos(angle) - field.offsetWidth/2);
        var y = Math.round(height / 2 + radius * Math.sin(angle) - field.offsetHeight/2);
        console.log(x, y)
        field.style.left = x + 'px';  //adding inline style to the document (field)
        field.style.top= y + 'px';

        angle += step;
      })
}

distributeFields();

【讨论】：

请将 cmets 添加到您的代码中以解释您的答案
谢谢，添加了cmets