图形绘制的坐标转换，巧妙解决坐标问题

前端

2023-12-19 07:28:57

大家好，我是前端西瓜哥。本期内容我们将一起探讨图形绘制和辅助线绘制中的坐标转换问题。

坐标转换基础回顾

在进行图形绘制时，我们需要明确视口坐标和场景坐标之间的转换关系：

视口转场景： (x_viewport, y_viewport) = (x_scene * scale + offset_x, y_scene * scale + offset_y)
场景转视口： (x_scene, y_scene) = ((x_viewport - offset_x) / scale, (y_viewport - offset_y) / scale)

其中，scale 为缩放比例，offset_x 和 offset_y 为视口原点相对于场景原点的偏移量。

图形绘制坐标问题

由于场景的尺寸通常大于可视区域（视口），因此我们绘制图形时需要进行视口坐标和场景坐标之间的转换。如果不进行转换，则图形将无法正确显示在视口中。

例如，如果我们想在视口中绘制一个边长为 100px 的正方形，但场景的尺寸为 1000px，则需要将正方形的四个顶点从场景坐标转换为视口坐标：

// 正方形的四个顶点在场景坐标系中的坐标
const vertices = [
  [0, 0],
  [100, 0],
  [100, 100],
  [0, 100]
];

// 场景坐标转视口坐标
for (let i = 0; i < vertices.length; i++) {
  const x = vertices[i][0] * scale + offset_x;
  const y = vertices[i][1] * scale + offset_y;
  vertices[i][0] = x;
  vertices[i][1] = y;
}

转换完成后，就可以使用这些视口坐标绘制正方形了。

辅助线绘制坐标问题

辅助线通常用于辅助图形绘制，例如对齐、标注等。辅助线的绘制也需要考虑坐标转换，否则可能会导致辅助线显示不正确。

假设我们想绘制一条垂直于 x 轴的辅助线，长度为 200px，从场景原点开始。我们需要将辅助线的两个端点的场景坐标转换为视口坐标：

// 辅助线的两个端点在场景坐标系中的坐标
const points = [
  [0, 0],
  [0, 200]
];

// 场景坐标转视口坐标
for (let i = 0; i < points.length; i++) {
  const x = points[i][0] * scale + offset_x;
  const y = points[i][1] * scale + offset_y;
  points[i][0] = x;
  points[i][1] = y;
}