时间戳

首页 > 解决方案 > 将点数组转换为 SVG 的线坐标为 x1、y1、x2、y2

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

问题描述

我有一个点数组作为[0, 0, 30, 0, 30, 20, 60, 20, 60, 40, 0, 40, 0, 0]. 我希望它们像x1, y1, x2, y2SVG 线坐标。这样我就从他们那里得到了 6 行。

它应该是这样的：

  1. line1 与 x1, y1, x2, y2 坐标 -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

任何类型的循环技术？

标签： javascriptarrays

解决方案

如果您对索引有点小心，您可以通过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)

推荐阅读