动态地在圆周上排列一些元素

Question

我正在寻找一个在圆周上排列元素的函数。
结果应该类似于：

- Omid

---

我的真正问题是我不懂三角函数。 - Omid

只适用于4个元素还是适用于相同距离的n个元素？ - Neysor

@Neysor 具有不同距离的 n 个元素。 - Omid

Answer 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/
这里还有一个改进版本，您可以更改元素计数。

- ThiefMaster

---

你怎么知道循环在哪里？ - Omid

我真的很想了解这个。你能否在回答中提供一些数学公式的解释。拜托啦 :) - Starx

@Starx：听起来值得一份赏金 ;) - ThiefMaster

@ThiefMaster，把一颗钻石加在你的名字后面，你还是贪心吗？：P - Starx

这很好，但变量“angle”是否保存角度测量？它不是保存以弧度表示的值吗？ - NShiell

Answer 2

对于一个以 (x, y) 为中心，距离为 r 的元素，其中心应该被定位在：

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

其中n是元素数量，k是您当前正在定位的元素的“编号”（介于1和n之间，包括1和n）。

- Delan Azabani

---

“xy”在数学上的意思与“x*y”相同。 - Delan Azabani

放置它们在椭圆中的公式是什么？ - RK-

Answer 3

我将ThiefMaster的小工具与jQuery pointAt插件结合起来：

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

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

- BananaAcid

Answer 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 是半径。

- Amit Kumar Khare

Answer 5

thiefmaster的答案的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();

- k1st

---

请在您的代码中添加注释以解释您的答案。 - phoenixstudio

谢谢，已添加注释。 - k1st