javascript - 如何创建并排堆叠拱门(形成一个圆圈)的功能？

Question

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

(这是一个简化版本。在真正的应用程序中，可能会有更多拱门。) 每个拱门的长度 为42。将拱门置于上部中心的旋转是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)]
  }
}

但我不知道如何继续。有什么想法吗？

Answer 1

假设 arches 数组包含您需要放置的尽可能多的拱门，您可以这样做:

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

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

另请注意，如果您的足弓尺寸为 42 度，则 158 度与理想位置相差 1 度:应该是 159 度。