如何计算第二个和第三个点的位置，以便使用点创建一个环？

Question

假设您有一个半径为1厘米的圆圈。现在你又添加了更多。

如何对齐这些以便您可以创建由这些圈子组成的大戒指？

如何计算第二个圆圈的放置位置，第三个圆圈等等？

我将使用这个平台来测试答案。

http://jsfiddle.net/7pqvf6mL/

我在200x200px平台上有一个5像素的半径点。让我们假设这个点代表了顶部 要创建的戒指。

下一个点应该放在哪里？还有所有其他点，以便我可以用这些点创造一个完美的戒指？

     .

Answer 1

Trig在做这种工作时非常方便

您需要使用圆的参数方程：

x = cx + r * cos(a)
y = cy + r * sin(a)

r是圆的半径，cx和cy是圆的中心，a是点从0开始的角度到2PI弧度。

所以你需要做的是将2PI（圆圈中的弧度数）除以你想要在圆周上均匀分布的元素数量。假设您想要在圆周上放置10个元素：

2PI/10 = 0.628

0.628是您想要放置元素的增量角度。对于每个元素，由于您需要移动到下一个增量，您将乘以元素的索引位置。因此，对于第一个元素a = (0.628 * 1)，第二个元素为a = (0.628 * 2)，依此类推。

在伪代码中：

circleRadius = 10;
circleX = 0;
circleY = 0;
numberOfElements = 10;
a = ((2*PI)/numberOfElements);
for i = 1; i <= numberOfElements; i++:
  x = circleX + circleRadius * cos(a*i);
  y = circleY + circleRadius * sin(a*i);

Answer 2

这是另一种考虑问题的方法，它将使解决方案更加清晰。

假设你已经有了很多这样的点设置。如果我们放大一些它们会是什么样子？

这个图表的重要之处在于：

• 每个圆点的中心正好位于较大圆的边缘。

• 更重要的是，每个点的半径几乎与定义它们的较大圆的边缘重合。

只要点 小于大圆，我们就可以将较大的圆近似为在每个点的中心和接触点之间运行的一系列线段。因此，较大圆的周长几乎等于每个点的直径和点数的乘积。

由于圆的圆周由2πr给出，圆的直径为2r，所以：

2 π Rbig = 2 N Rsmall

或者，在一些简单的代数变换之后：

N = π * Rbig / Rsmall

其中Rbig是较大圆的半径，Rsmall是点的半径，N是点数。

请注意，由于N必须是整数，因此如果您希望点完美地排列，则Rbig和Rsmall的确切值会受到一些限制。例如，如果您的给定值为Rbig = 100px且Rsmall = 5px，则会得到N = 62.83。由于你不能有一个非整数的圆圈，所以有必要稍微调整一下尺寸（或向上圆N并接受一些重叠），直到得到一个干净的值。

现在我们知道需要多少个点，我们可以使用圆的参数方程（x = cos(θ), y = sin(θ)）绘制圆圈：

var Rbig = 95;
var Rsmall = 5;

var N = Math.ceil(Math.PI * Rbig / Rsmall);
var theta = 0;

var target = document.getElementById("a");

for (var i = 0; i < N; i++) {
    theta += 2 * Math.PI / N;
    var x = Rbig + Rbig * Math.cos(theta);
    var y = Rbig + Rbig * Math.sin(theta);

    var dot = document.createElement("div");
    dot.setAttribute("class", "c");
    dot.style.left = x + "px";
    dot.style.top = y + "px";
    target.appendChild(dot);
}

http://jsfiddle.net/7pqvf6mL/10/

请注意，我必须稍微调整.c类的定义才能使其正常工作 - 正如所写，它的半径为2.5 px，而不是5 px。我还必须将Rbig设置为95而不是100，因为每个点的5 px半径增加了整个圆的半径！