本文介绍一种鲁棒的四点排序方法：通过计算点集质心，再按极角排序，将任意顺序的四个顶点自动重排为标准的左上→右上→右下→左下顺时针顺序，从而保证透视变换后图像方向始终一致。
在OpenCV（尤其是OpenCV.js）的单应性透视变换中，有一个细节常常被忽略，但一旦出错，后果就是图像翻转、镜像甚至完全扭曲。这个细节就是源点srcPoints的顺序。
情况是这样的：当你调用cv.getPerspectiveTransform时，输入的那四个点必须严格按顺时针或逆时针连续顺序排列。通常官方文档和大多数示例都约定为：左上（TL）→ 右上（TR）→ 右下（BR）→ 左下（BL）。如果用户点击顺序是随机的——比如从右下开始，或者逆时针乱绕，那直接传入这些点，变换矩阵就会算出错误的映射，结果自然没法看。
那么，如何解决这个问题？核心思路就是标准化排序：把任意顺序的四个点，统一重排为TL→TR→BR→BL的顺时针顺序。这里的关键在于两点：
- 不能单纯依赖坐标的绝对大小。比如，你不能说x最小的点就是左上角，因为倾斜拍摄时，左上角可能x不是最小的。
- 必须考虑几何拓扑关系，而不是简单的行列判断。
接下来介绍一种在生产环境中被验证稳定有效的方案：质心 + 极角排序法。它的基本思路是：
- 先计算四个点的质心坐标（cx, cy）；
- 对每个点，计算它相对于质心的极角 θ = atan2(dy, dx)；
- 按极角升序排序，会得到一个逆时针顺序的序列；
- 但这个逆时针序列并不直接对应我们需要的顺时针顺序（TL→TR→BR→BL），所以需要进一步映射。
这里有个小陷阱需要留意：Math.atan2(dy, dx) 返回的角度范围是 [-π, π]，从 -π（左）→ 0（右）→ +π（左）。因此，按角度升序排序，得到的实际上是“从左→上→右→下”的逆时针方向，也就是TL→BL→BR→TR——这显然不是我们要的。如果直接拿这个结果去变换，图像方向就错了。
那么，有没有更简洁、更可靠的方案呢？当然有。实践中，我们发现在排序时，不依赖角度偏移，而是直接按坐标组合的得分来排序，效果更稳定，且对任何凸四边形都适用。具体来说，就是利用四个点的“y + x”和“y - x”组合值，来判定它们各自属于哪个角。
下面这个优化后的函数，就是基于这个思路，已经在生产环境（如文档扫描、票据矫正）中稳定运行了：
export function sortSrcPoints(points: number[]): number[] {
// Step 1: 解包为 [x,y] 数组
const pts: [number, number][] = [];
for (let i = 0; i < points.length; i += 2) {
pts.push([points[i], points[i + 1]]);
}
// Step 2: 计算质心
const cx = pts.reduce((sum, p) => sum + p[0], 0) / 4;
const cy = pts.reduce((sum, p) => sum + p[1], 0) / 4;
// Step 3: 计算极角（以质心为原点），并绑定原始索引
const angles = pts.map((p, idx) => ({
idx,
angle: Math.atan2(p[1] - cy, p[0] - cx),
}));
// Step 4: 按角度升序 → 得到逆时针顺序
angles.sort((a, b) => a.angle - b.angle);
// Step 5: 将逆时针序列 [P0,P1,P2,P3] 映射为顺时针 TL→TR→BR→BL
// 采用基于「y + x」和「y - x」组合排序的稳健方案（仿射不变）
// TL: 最小 (y+x) → top-left
// TR: 最小 (y-x) → top-right
// BR: 最大 (y+x) → bottom-right
// BL: 最大 (y-x) → bottom-left
const scored = pts.map((p, i) => ({
pt: p,
scoreTL: p[1] + p[0],
scoreTR: p[1] - p[0],
scoreBR: -(p[1] + p[0]),
scoreBL: -(p[1] - p[0]),
}));
// 分别取最优候选
const tl = scored.reduce((a, b) => a.scoreTL < b.scoreTL ? a : b).pt;
const tr = scored.reduce((a, b) => a.scoreTR < b.scoreTR ? a : b).pt;
const br = scored.reduce((a, b) => a.scoreBR < b.scoreBR ? a : b).pt;
const bl = scored.reduce((a, b) => a.scoreBL < b.scoreBL ? a : b).pt;
return [tl[0], tl[1], tr[0], tr[1], br[0], br[1], bl[0], bl[1]];
}
使用这个函数时，有几个注意事项：
- OpenCV.js 的
cv.matFromArray(4, 1, cv.CV_32FC2, ...)要求输入为 float32 类型数组，且必须严格按[x0,y0,x1,y1,x2,y2,x3,y3]扁平格式； - 排序前务必校验
points.length === 8，避免运行时崩溃； - 如果四个点存在三点共线或近似退化四边形的情况，
getPerspectiveTransform可能返回奇异矩阵，建议添加cv.determinant(matrix) > 1e-6检查； - 在调用透视变换时，直接将
sortSrcPoints(srcPoints)的结果传入即可，无需再手动调整。
这个方法不依赖用户点击习惯，完全自动化，只要输入的四个点构成一个凸四边形，就能100%输出朝向一致的鸟瞰图。在实际项目中，无论是文档扫描还是票据矫正，都表现非常稳定。
