Javascript 围绕一个圆动态排列一些元素

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

---

以下是一些代码，可以帮助您：

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;
}

演示：

---

这里是一个可以更改元素计数的位置。

对于距离r为（x，y）的中心周围的元素，元素的中心应位于：

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

---

其中n是元素的数量，k是当前定位的元素的“数量”（介于1和n之间）。

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

演示：

在圆圈中排列元素（Javascript）

函数排列元素圆圈（元素，x，y，r）{
对于（var i=0；i

---

其中，

x，y

是点坐标，

元素

是要放置的元素数组，

r

是半径。

仅Javascript版本的thiefmaster答案

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();

---

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

n

元素？@Neysor

n

不同距离的元素。您如何知道循环的位置？您需要添加圆的坐标，并从

x

和

y

中减去元素尺寸的一半。我真的很想了解这一点。请你在答案上用数学公式解释一下好吗。很好：）@Starx:听起来像是值得赏金的东西；）@盗贼师傅，你的名字后面有一颗普通的钻石，你还贪婪吗？？：P

xy

在数学中的意思与

x*y

相同。将它们放置在椭圆中的公式是什么？请在代码中添加注释以解释您的答案谢谢，添加注释

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

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))
    }
}

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();