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

Question

使用 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

How can I find the height & width of each div so that they fit in circle with a little space between each other.

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

How to find new X,Y position of each div so that they are arranged in a square?

从 Angular 计算它们将位于正方形的哪一侧。你已经得到了第一个坐标。然后，使用 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;
}