用正弦和余弦将 div 定位在一个圆圈中

Question

所以我想把我的 div 围成一个圆圈，这就是我目前所拥有的。

Here's 代码笔，如果你想现场查看。

SCSS

$num: 200;

$angle: 0;
$step: (pi())/10;


@for $i from 1 through $num {

  $angle: $step + $angle;
  //$radians: rad($angle);

  $mar: $num;

  $top: $i  * cos($angle);
  $left: $i * sin($angle);

  .cir:nth-child(#{$i}) {

    margin-left:$left + px;
    margin-top:$top + px;

    background: hsl($i*pi(), 50, 70);
    opacity:0.8;

    border-radius: 50%;
    //border:1px solid gray;

    width:5px;
    height:5px;

    position:absolute;

    opacity:0;


    animation:no-#{$i} 1s ease infinite;
    animation-delay:$i*0.01s;


  }

Haml（只是一个吐出 200 divs 的循环）

- 200.times do
    .cir

使用这个算法我能够创建这样的东西：

我知道它是从中心开始增加的，而且当前 div 和下一个之间的 space 每次都在增加。

我试着让每个圆圈都可能是 360/(numberOfDivs) 度，直到 divs 形成一个圆圈，下图是一个圆圈更少的例子:

我希望我说得有道理，如果是的话，我将不胜感激。

我知道我的算法有问题：（可能在这方面）

$top: $i  * cos($angle);
$left: $i * sin($angle);

并希望有人知道如何修复它。

提前致谢。

Answer 1

给定：
以 CX, CY
为中心的半径 R 的大圆问题：
将 N 个小圆圈无间隙地围绕在大圆圈上

首先我们要求一个小圆的半径r:
大小圆心和接触点构成直角矩形，斜边R+r，角Pi/N，腿（脚）r。如此简单的三角学给了我们公式：

r = (R + r) * Sin (Pi/N)
r  = R * Sin (Pi/N) / (1 - Sin(Pi/N))

（快速检查 6 个圆给出角度 Pi/6 和 r = R - 真）

现在我们可以计算出第i个小圆的圆心坐标：

XC[i] = CX + (R + r) * Cos(i * 2 * PI / N) //round to integers if needed
YC[i] = CY + (R + r) * Sin(i * 2 * PI / N) //angles in radians

如果您需要边界正方形的左上角坐标，只需从上面计算的值中减去 r

$num: 12;

$step: 2*pi() / $num;

@for $i from 1 through $num {

  $angle: $step * $i;

  $top: use my formula

用正弦和余弦将 div 定位在一个圆圈中

Positioning divs in a circle with sine and cosine

css

math

geometry

trigonometry

sass