javascript - 如何将坐标数组格式化为不同的引用点

Question

我环顾四周，找不到有关该主题的任何信息......可能是因为我无法将我的问题准确地迭代到搜索引擎中。

我正在尝试从 dxf 中获取原始线条数据，将其排序为正方形，找到每个正方形的中心，对中心进行编号，然后将结果打印为 pdf。

我有一个类似于以下的数据结构:

[
[{x: 50, y:50}, {x:52, y:52}],
[{x: 52, y:52}, {x:54, y:54}],
[{x: 54, y:54}, {x:56, y:56}]...
]

这些坐标是通过使用 dxf-parser 解析 dxf 获得的，它返回描述线条路径的对象数组。其中四个组合形成一个正方形，我使用它进行分割

  function chunkArrayInGroups(arr, size) {
    let result = [];
    let pos = 0;
    while (pos < arr.length) {
      result.push(arr.slice(pos, pos + size));
      pos += size;
    }
    return result;
  }

((大小 = 4))

这在很大程度上符合预期，除了这些坐标是用屏幕中心的原点创建的。我用来创建最终文档的 pdf 库不使用相同的坐标系。我相信它从页面的左上角开始。这使得我的所有负值((模型中心左侧的任何内容))切断了页面。

为了解决这个问题，我迭代数组并在新数组中收集“0 - 所有 x 和 y 值”，我找到了其中的最大值来给我偏移量。我将此偏移量添加到我的 x 值中，然后将它们插入我的 pdf 创建器以绘制线条。

我不确定是什么原因造成的，但输出是“达芬奇风格”，我喜欢称之为它，它旋转了 180 度并向后写入。我认为向每个单元格添加一些值可以解决负面问题......确实如此，但数据仍然相对于中心原点。有没有一种方法可以重新定义这些数据以与该库一起使用，或者是否有其他库可以让我绘制这些数据并根据我的情况在特定位置添加文本。我想继续使用这个库，就像我将它用于程序的其他部分一样，但我愿意接受新的、更有效的想法。

感谢您的时间和专业知识!

它应该是什么样子

Source Picture

“达芬奇”结果

Current Output

代码副本:

const PDFDocument = require('pdfkit');
const doc = new PDFDocument({ autoFirstPage: true })
const DxfParser = require('dxf-parser')

let fileText = fs.readFileSync('fulltest.dxf', { encoding: 'utf-8' })
let data = []
let data2 = []
let data3 = []
let shiftx = []
let shifty = []
let factor = 5
var parser = new DxfParser();
let i = 0
doc.pipe(fs.createWriteStream('test.pdf'));
try {
  var dxf = parser.parseSync(fileText);
  let array = dxf.entities
  array.forEach(line => {
    if (line.layer === "Modules") {
      data.push(line.vertices)
    }
    if (line.layer === "Buildings") {
      data2.push(line.vertices)
    }
    if (line.layer === "Setbacks") {
      data3.push(line.vertices)
    }
    let segment = line.vertices
    segment.forEach(point => {
      shiftx.push(0 - point.x)
      shifty.push(0 - point.y)
    })

  })
  
  let shift = biggestNumberInArray(shiftx)

  console.log(shift)
  data = chunkArrayInGroups(data, 4)
  data.forEach(module => {
    let midx = []
    let midy = []
    module.forEach(line => {
      let oldx = (line[1].x + shift) * factor
      let oldy = (line[1].y + shift) * factor
      let newx = (line[0].x + shift) * factor
      let newy = (line[0].y + shift) * factor
      doc
        .moveTo(oldx, oldy)
        .lineTo(newx, newy)
        .stroke()
      midx.push(oldx + (newx - oldx) / 2)
      midy.push(oldy + (newy - oldy) / 2)
    })
    let centerx = (midx[0] + (midx[2] - midx[0]) / 2)
    let centery = (midy[0] + (midy[2] - midy[0]) / 2)
    let z = (i + 1).toString()
    doc
      .fontSize(10)
      .text(z, centerx-5, centery-5)
    i++
  })

  data2.forEach(line => {
    let oldx = (line[0].x + shift) * factor
    let oldy = (line[0].y + shift) * factor
    let newx = (line[1].x + shift) * factor
    let newy = (line[1].y + shift) * factor
    doc
      .moveTo(oldx, oldy)
      .lineTo(newx, newy)
      .stroke()
  })
  data3.forEach(line => {
    let oldx = (line[0].x + shift) * factor
    let oldy = (line[0].y + shift) * factor
    let newx = (line[1].x + shift) * factor
    let newy = (line[1].y + shift) * factor
    doc
      .moveTo(oldx, oldy)
      .lineTo(newx, newy)
      .stroke('red')
  })
  doc.end();

} catch (err) {
  return console.error(err.stack);
}


function biggestNumberInArray(arr) {
  const max = Math.max(...arr);
  return max;
}

function chunkArrayInGroups(arr, size) {
  let result = [];
  let pos = 0;
  while (pos < arr.length) {
    result.push(arr.slice(pos, pos + size));
    pos += size;
  }
  return result;
}

Answer 1

坐在外面盯着栅栏看了一会儿后，我重新访问了我的计算机并再次查看了输出。我像以前一样将它旋转了 180 度并研究了它。然后我想象它翻转了 y 轴，就像我的电脑一样。就是这样!我抓起一些纸，画出了原始坐标，以及pdf库中的坐标。

输入坐标^>

输出坐标v>

我意识到坐标系的唯一区别是 y 轴颠倒了!将行更改为

      let oldx = (line[1].x + shift) * factor
      let oldy = (-line[1].y + shift) * factor
      let newx = (line[0].x + shift) * factor
      let newy = (-line[0].y + shift) * factor

相对于 y 反转并移位后，打印正确!数学又赢了哈哈哈