4

在此处输入图像描述

我发现了这样的东西

许多涉及基于形状的基本定位的数学都是相对简单的。您可能在高中时就已经了解过它，其中大部分内容看起来很熟悉。考虑一个圆的中心 (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(弧度) * 半径；

其中弧度 = (angle_of_the_circle/180) * Math.PI。centerX 是我们页面上圆的 X 中心，centerY 是圆的 Y 中心。

谁能让我的概念清楚地说明上述技术是如何工作的？

4

1 回答 1

5

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

$(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>在运行时添加
jsfiddle.net/9Z7a8/7添加新元素时有些随机性。
jsfiddle.net/9Z7a8/8/为了好玩，一个有一些颜色变化（不完美）

于 2013-06-23T07:18:55.543 回答