如何围绕圆圈定位项目

Question

我找到了类似this

的内容

  

基于形状的基本定位的大量数学运算相对简单。你可能已经在高中时已经覆盖了它，所以这看起来很熟悉。考虑圆形具有中心（j，k）和半径r。那么圆圈路径上出现的任何点的x和y位置都是

     

x（t）= r cos（t）+ j，y（t）= r sin（t）+ k。一种更通用的编写方式，可用于我们首次尝试基于坐标的定位：   ？   1   2

     

x = centerX + Math.cos（弧度）*半径;   y = centerY + Math.sin（弧度）* radius;

     

其中radians =（angle_of_the_circle / 180）* Math.PI. centerX是我们页面上圆圈的X中心，centerY是圆圈的Y中心。

有谁可以让我的概念清楚地说明上述技术是如何运作的？

Answer 1

由于您似乎喜欢我在评论中发布的示例，我认为我会将其作为答案发布，以便它可以永久存在于答案部分。

$(document).ready(function() {
    var radius = 100;
    var xCenter = 120;
    var yCenter = 120;
    var cnt = $('li').length;
    var angle = 0;
    var angleDelta = 2 * Math.PI / cnt;
    $('li').each(function(i, el) {
        x = radius * Math.cos(angle) + xCenter;
        y = radius * Math.sin(angle) + yCenter;
        $(this).css({top: y, left: x});
        angle += angleDelta;

    })
})

基于此的一些小提琴 jsfiddle.net/9Z7a8一个简单的开始 jsfiddle.net/9Z7a8/1一个更大的例子 - 只修改半径，<li>的数量和中心的偏移值 jsfiddle.net/9Z7a8/6在运行时添加<li>个 jsfiddle.net/9Z7a8/7添加新元素时的一些随机性 jsfiddle.net/9Z7a8/8/为了好玩，有一些变色（不完美）