OpenCV透视变换中如何确保源点按左上右上右下左下排列

本文介绍一种基于几何中心与极角排序的稳健方法，能够将用户任意选取的四个轮廓点自动重排为标准顺时针或逆时针顺序（例如左上→右上→右下→左下），从而确保透视变换后的图像方向始终保持一致，避免因点序混乱导致的图像翻转或旋转问题。

在 OpenCV 的单应性透视变换中，有一个极易被忽视却至关重要的细节——源点的输入顺序。无论是桌面端的 OpenCV 还是浏览器端的 OpenCV.js，cv.getPerspectiveTransform 都要求四个点严格按 top-left → top-right → bottom-right → bottom-left 的顺时针（或等价逆时针）顺序排列。如果用户交互式选点时顺序混乱（比如从右下角开始逆时针点了一圈），变换后的图像轻则发生翻转，重则旋转180°甚至镜像，直接导致后续的文档矫正、AR贴图等功能全部偏离预期。

解决这个问题的核心思路其实非常直观：不依赖用户手动指定的顺序，而是通过几何计算自动将点序标准化。最可靠且通用的方法，概括起来就四步：

1. 计算四个点的几何中心（centroid）；
2. 将每个点相对于中心转换为极坐标，计算它与正x轴的夹角（使用 Math.atan2(dy, dx)）；
3. 按角度升序排序——结果就是绕中心逆时针排列的点序；
4. 映射回原始坐标，得到标准的 [x0,y0, x1,y1, x2,y2, x3,y3] 序列。

听起来是不是很直观？下面给出一段生产就绪的 TypeScript 实现，兼容 OpenCV.js 的输入格式：

export function sortTransformPoints(points: number[]): number[] {
  // Step 1: Compute centroid (a verage of all x and y)
  let cx = 0, cy = 0;
  for (let i = 0; i < points.length; i += 2) {
    cx += points[i];
    cy += points[i + 1];
  }
  cx /= 4;
  cy /= 4;

  // Step 2: Calculate polar angle for each point relative to centroid
  const angles: { index: number; angle: number }[] = [];
  for (let i = 0; i < points.length; i += 2) {
    const dx = points[i] - cx;
    const dy = points[i + 1] - cy;
    const angle = Math.atan2(dy, dx); // Returns [-π, π]
    angles.push({ index: i, angle });
  }

  // Step 3: Sort by angle (ascending → counter-clockwise order)
  angles.sort((a, b) => a.angle - b.angle);

  // Step 4: Reconstruct ordered array [x0,y0, x1,y1, x2,y2, x3,y3]
  const orderedPts: number[] = [];
  for (const { index } of angles) {
    orderedPts.push(points[index], points[index + 1]);
  }

  return orderedPts;
}

✅ 关键说明与注意事项：

• Math.atan2(dy, dx) 返回值范围是 [-π, π]，升序排序天然对应逆时针环绕中心，恰好匹配 OpenCV 所需的 top-left → top-right → bottom-right → bottom-left 顺序（前提是四点构成凸四边形且无严重畸变）；
• 如果你需要严格顺时针顺序（某些旧版文档可能有此要求），只需将 sort 改为降序：b.angle - a.angle；
• 该方法对任意凸四边形都鲁棒，但不适用于凹四边形或自交多边形——建议在调用前做简单的凸性校验（比如检查叉积符号的一致性）；
• 在实际的 transformPerspective 函数中，只需在构造 srcTri 之前插入一行：

  const sortedSrcPoints = sortTransformPoints(srcPoints);
  let srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, sortedSrcPoints);

• 性能开销极小（仅4个点的计算），可以安全集成到实时交互流程中。

总结一下：点序标准化不是前端“取巧”，而是透视变换的数学前提。采用基于质心加极角的自动排序，既消除了对用户操作顺序的依赖，又保持了算法的简洁性和跨平台兼容性，是工业级文档矫正、AR贴图、表单识别等场景的标准实践。下次再遇到图像方向不对，记得先检查一下源点顺序——很可能就是它惹的祸。