如何确保 OpenCV 透视变换中源点顺序统一：按左上→右上→右下→左下排列

本文介绍一种基于几何中心与极角排序的稳健方法，将用户任意顺序选取的四个轮廓点自动重排为标准的顺时针/逆时针顺序（如 top-left → top-right → bottom-right → bottom-left），从而保证透视变换后图像方向始终一致。

本文介绍一种基于几何中心与极角排序的稳健方法，将用户任意顺序选取的四个轮廓点自动重排为标准的顺时针/逆时针顺序（如 top-left → top-right → bottom-right → bottom-left），从而保证透视变换后图像方向始终一致。

在使用 OpenCV（尤其是 OpenCV.js）进行单应性透视变换（cv.getPerspectiveTransform）时，源点（srcPoints）的输入顺序直接决定输出图像的方向。OpenCV 要求这四个点严格按 top-left → top-right → bottom-right → bottom-left 的顺时针（或等价的逆时针）顺序排列；若用户交互式选取点时顺序混乱（例如从右下开始逆时针选点），会导致变换后图像发生水平翻转、旋转180°或镜像，严重影响后续使用。

解决该问题的核心思路是：不依赖用户点击顺序，而通过几何计算自动标准化点序。最可靠且通用的方法是：

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 (average 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贴图、表单识别等场景的标准实践。