如何将2D坐标列表缩放到指定尺寸并在画布内居中显示

核心逻辑 #

等比缩放保证图形不变形，计算偏移量保证画布居中，整体步骤如下：

• 确定安全缩放比例
  为了避免图形变形同时占满可用空间，取画布宽高的最小值作为缩放基准，可预留10px左右的安全边距防止图形边缘被裁切：

  // 示例：画布尺寸canvasW=400, canvasH=400，预留边距padding=10
  const availableW = canvasW - 2 * padding
  const availableH = canvasH - 2 * padding
  const scale = Math.min(availableW, availableH)
  

• 计算居中偏移量
  缩放后的图形实际尺寸为scale * 1（因为你已经把坐标归一化到0-1区间，原始归一化图形的宽高都是1），因此需要计算x、y方向的偏移值让图形居中：

  const offsetX = (canvasW - scale) / 2
  const offsetY = (canvasH - scale) / 2
  

• 单坐标转换公式
  对每个归一化后的坐标(normX, normY)，直接套用公式得到画布坐标：

  const canvasX = offsetX + normX * scale
  const canvasY = offsetY + normY * scale
  

常见注意事项 #

• 如果你的画布坐标系y轴向下（绝大多数2D画布框架比如Canvas API、SVG都是这个规则），而归一化时y轴是向上的，需要翻转y坐标：

  const canvasY = offsetY + (1 - normY) * scale
  

• 如果原始归一化操作是按原始图形的宽高分别做的，导致归一化后的图形不是正方形，只需要把缩放比例计算逻辑调整为：

  // 假设归一化后图形的宽高为normW、normH（如果是0-1区间且按原始比例归一的话，normW和normH其中一个为1，另一个为原始宽高比）
  const scale = Math.min(availableW / normW, availableH / normH)
  

内容的提问来源于stack exchange，提问作者jeannicolas