如何在Cirlcle周围定位物品

Question

我发现了这样的事情

基于形状的基本定位的许多数学运算相对简单.你可能已经在高中时已经覆盖了它,所以这看起来很熟悉.考虑圆形具有中心(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(弧度)*半径;

其中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>s的数量和中心的偏移值.
jsfiddle.net/9Z7a8/6<li>在运行时添加s
jsfiddle.net/9Z7a8/7添加新元素时有些随机性.
jsfiddle.net/9Z7a8/8/为了好玩,有一些颜色变化(不完美)