使用 javascript 和数学将 div 元素排列成正方形

Question

I n 个使用 JavaScript 排列成圆形的 div。现在我将每个 div 的维度设置为40×40。以下是我到目前为止能够实现的目标。这就是我找到每个 div 的 X 和 Y 的方式。

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

其中 hCenter 和 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;
}