将点数组转换为SVG的线坐标为x1，y1，x2，y2

Question

我有一个点数组，为[0, 0, 30, 0, 30, 20, 60, 20, 60, 40, 0, 40, 0, 0]。 我希望它们像SVG线坐标的x1, y1, x2, y2。这样我从他们那里得到6条线。

应为：

1. 具有x1，y1，x2，y2坐标的第1行-0,0,30,0
2. 第2行-30, 0,30,20
3. 第3行-30,20,60,20
4. 第4行-60,20,60,40
5. 第5行-60,40, 0,40
6. 第6行-0, 40, 0, 0

有什么循环技术吗？

Answer 1

如果您对索引稍加注意，可以使用for循环逐步完成。您只需要按两个步骤进行迭代，然后在每次迭代中使用四个元素。您还需要尽早停止循环2元素，因为您不希望从最后两个元素开始的组。

我不确定您想要数据的确切格式，但这应该很容易更改以达到您的目的：

let coords = [0, 0, 30, 0, 30, 20, 60, 20, 60, 40, 0, 40, 0, 0]
let lines = []
for(let i = 0; i < coords.length - 2; i += 2){  // step by 2, stop early
  let [x1, x2, y1, y2] = coords.slice(i, i+4)   // take four elements
  lines.push({x1, x2, y1, y2})
}
console.log(lines)