javascript - 如何创建并排堆叠拱形(形成一个圆)的函数？

我想创建一个以以下方式堆叠拱门的函数：



（这是一个简化版本。在实际应用中，可能会有更多的拱门。）
每个拱门的length为42。将拱门放在上方中心的rotation是158。

我的数学很不好，所以这就是我能想到的：

positionArches () {
  const archWidth = 42
  const arches = [
    { name: 'arch1', rotation: 0 }, // must change the rotation
    { name: 'arch2', rotation: 0 },
    { name: 'arch3', rotation: 0 }
  ]
  if (this.isOdd) {
    // 1 arch: [158]
    // 3 arches: [158 - archLength, 158, 158 + archLength] // smaller to larger
  } else {
    // 2 arches: [158-(archLength/2), 158+(archLength/2)]
  }
}

但是我不知道如何继续。有任何想法吗？

最佳答案

假设arches数组包含所需放置的拱门数，则可以执行以下操作：

arches.forEach(function (arch, i) {
    arch.rotation = 180 - arches.length * 21 + i * 42;
});

请注意，如果拱门超过4个，它们将开始重叠。

另请注意，如果您的拱门尺寸为42度，则158与理想位置的距离是1度：应该为159。