使用javascript和数学在正方形中排列div元素

Question

使用JavaScript将多个div排列成圆形。现在我将每个div的维度设置为40×40。以下是我迄今能够实现的目标。这就是我找到X＆amp; amp;每个div的Y.

x = 100 * Math.cos(angle) + hCenter;
y = 100 * Math.sin(angle) + vCenter;

其中hCenter＆amp; vCenter是屏幕的中心点

1. 当有多个圆圈时，它们会相互重叠。怎么样 我能找到身高吗？每个div的宽度使它们适合圆圈 彼此之间有一点空间。

2. 如何在广场上排列相同的圆圈。意味着来自的动画 圆到正方形。如何找到每个div的新X，Y位置。

Answer 1

  

如何找到高度和高度？每个div的宽度使它们适合圆形，彼此之间有一点空间。

每个圆的宽度和高度与其直径相同，（加上小花边）相当于由其位置形成的多边形边的长度。您知道排列的大方块/圆的大小（“直径”），因此您可以轻松地从中计算length of the sides和项目数。然后减去一个小的常数或因子，你得到了你的结果。

  

如何找到每个div的新X，Y位置，使它们排列成正方形？

从他们将坐在哪个方格的角度计算。你有第一个坐标。然后，使用sin / cos计算该方的位置。

var dir = Math.round(angle / Math.PI * 2) % 4,
    dis = dir<2 ? 100 : -100;
if (dir % 2 == 0) {
    x = hCenter + dis;
    y = vCenter + dis * Math.tan(angle);
} else {
    x = hCenter + dis / Math.tan(angle);
    y = vCenter + dis;
}