Javascript 围绕一个圆圈动态排列一些元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10152390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically arrange some elements around a circle
提问by Omid
I'm looking for a function to arrange some elements around a circle.
result should be something like :
我正在寻找一个函数来围绕一个圆圈排列一些元素。
结果应该是这样的：
回答by ThiefMaster
Here's some code that should help you:
以下是一些应该可以帮助您的代码：
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;
}
It is not complete but should give you a good start.
它并不完整，但应该给你一个良好的开端。
Update: Here's something that actually works:
更新：这里有一些实际有效的东西：
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;
});
Demo: http://jsfiddle.net/ThiefMaster/LPh33/
Here's an improved versionwhere you can change the element count.
演示：http: //jsfiddle.net/ThiefMaster/LPh33/
这是一个改进版本，您可以在其中更改元素计数。
回答by Delan Azabani
For an element around a centre at (x, y), distance r, the element's centre should be positioned at:
对于以 ( x, y)为中心的元素，距离为r，元素的中心应位于：
(x + r cos(2kπ/n), y + r sin(2kπ/n))
where nis the number of elements, and kis the "number" of the element you're currently positioning (between 1 and ninclusive).
其中n是元素的数量，k是您当前定位的元素的“数量”（介于 1 和n之间）。
回答by BananaAcid
I've combined ThiefMaster's fiddle with the jQuery pointAt plugin:
我将 ThiefMaster 的小提琴与 jQuery pointAt 插件结合起来：
Demo: http://jsfiddle.net/BananaAcid/nytN6/
演示：http: //jsfiddle.net/BananaAcid/nytN6/
the code is somewhat like above.
might be interesting to some of you.
回答by Amit Kumar Khare
Arrange Elements In Circle (Javascript)
在圆圈中排列元素 (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))
}
}
Where x,yis point co-ordinates and elementsis array of elements to be placed and ris radius.
哪里x,y是点坐标，elements是要放置的元素数组，r是半径。
