将div放在一个带有正弦和余弦的圆圈中

Question

所以我想把我的div放在一个圆圈里，这就是我到目前为止所做的。

Here's如果你想现场检查它，可以使用。{/ p>

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个div的循环）

- 200.times do
    .cir

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

我知道它从中心开始增加，并且当前div和下一个div之间的空间每次都会增加。

我试图让它成为每个圆圈可能是360 /（numberOfDivs）度，直到div形成一个圆圈，下面的图像是一个圆圈少得多的例子：

我希望我有道理，如果是的话，我会非常感谢任何帮助。

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

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

并希望有人知道如何解决它。

提前谢谢。

Answer 1

鉴于

：
半径R的大圆圈以CX, CY为中心 问题：
将N个小圆圈放在没有间隙的大圆圈周围

首先，我们必须找到一个小圆的半径r：
大圆和小圆的中心和触摸点形成右边的矩形，带有斜边R+r，角度Pi/N和腿部（cathetus）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