JS getTransform函数适配非平行点affine变换的技术求助

问题核心 #

仿射变换天生要求保持平行线和共线点比例，就拿你给的例子来说：原始from是个矩形，四条边两两平行，但目标to点的左右边（(0.25,0)-(0,1)和(0.75,0)-(1,1)）已经不平行了，这时候根本不存在一个精确的仿射矩阵能把所有from点完美映射到to点。

我们能做的，是生成一个误差最小的近似仿射矩阵——让变换后的from点和to点的整体偏差尽可能小，用最小二乘法就能搞定这个事。

实现思路 #

每个点经过仿射变换后的坐标公式是：

x' = a*x + c*y + e
y' = b*x + d*y + f

4个点会生成8个方程，但仿射矩阵只有6个参数（a,b,c,d,e,f），属于“超定方程组”——方程比未知数多，没有精确解，只能找最优近似解。我们通过最小化所有点的误差平方和，用高斯消元法求解这个最优解。

修改后的getTransform函数 #

function getTransform(from, to) {
    // 校验输入：必须各传4个[x,y]格式的点
    if (from.length !== 4 || to.length !== 4) {
        throw new Error('from和to数组必须各包含4个点');
    }

    const A = [];
    const b = [];

    // 构建求解需要的矩阵和向量
    for (let i = 0; i < 4; i++) {
        const [x, y] = from[i];
        const [tx, ty] = to[i];
        // 对应x'的方程行
        A.push([x, 0, y, 0, 1, 0]);
        b.push(tx);
        // 对应y'的方程行
        A.push([0, x, 0, y, 0, 1]);
        b.push(ty);
    }

    // 计算转置矩阵、矩阵乘积等线性代数操作
    const AT = transpose(A);
    const ATA = multiplyMatrices(AT, A);
    const ATb = multiplyMatrixVector(AT, b);

    // 解线性方程组得到参数
    const params = solveLinearSystem(ATA, ATb);

    if (!params) {
        throw new Error('无法生成矩阵，输入点可能共线');
    }

    // 返回canvas transform需要的参数顺序：a, b, c, d, e, f
    return [params[0], params[1], params[2], params[3], params[4], params[5]];
}

// 矩阵转置辅助函数
function transpose(matrix) {
    return matrix[0].map((_, colIdx) => matrix.map(row => row[colIdx]));
}

// 矩阵乘法辅助函数
function multiplyMatrices(a, b) {
    const result = Array(a.length).fill().map(() => Array(b[0].length).fill(0));
    for (let i = 0; i < a.length; i++) {
        for (let j = 0; j < b[0].length; j++) {
            for (let k = 0; k < b.length; k++) {
                result[i][j] += a[i][k] * b[k][j];
            }
        }
    }
    return result;
}

// 矩阵乘向量辅助函数
function multiplyMatrixVector(matrix, vector) {
    return matrix.map(row => row.reduce((sum, val, idx) => sum + val * vector[idx], 0));
}

// 高斯消元法解线性方程组
function solveLinearSystem(A, b) {
    const n = A.length;
    const aug = A.map((row, i) => [...row, b[i]]); // 构造增广矩阵

    for (let col = 0; col < n; col++) {
        // 找主元行（绝对值最大的行，避免精度问题）
        let pivotRow = col;
        for (let row = col; row < n; row++) {
            if (Math.abs(aug[row][col]) > Math.abs(aug[pivotRow][col])) {
                pivotRow = row;
            }
        }
        // 交换主元行和当前行
        [aug[col], aug[pivotRow]] = [aug[pivotRow], aug[col]];

        const pivotVal = aug[col][col];
        // 主元接近0，说明矩阵奇异，无解
        if (Math.abs(pivotVal) < 1e-10) return null;

        // 归一化主元行
        for (let j = col; j <= n; j++) {
            aug[col][j] /= pivotVal;
        }

        // 消去其他行的当前列
        for (let row = 0; row < n; row++) {
            if (row !== col && Math.abs(aug[row][col]) > 1e-10) {
                const factor = aug[row][col];
                for (let j = col; j <= n; j++) {
                    aug[row][j] -= factor * aug[col][j];
                }
            }
        }
    }

    // 提取解
    return aug.map(row => row[n]);
}

测试你的示例 #

const from = [[0, 0], [1, 0], [1, 1], [0, 1]];
const to = [[0.25, 0], [0.75, 0], [1, 1], [0, 1]];
const matrix = getTransform(from, to);
console.log(matrix);
// 输出示例（精度范围内）：[0.5, 0.25, 0.25, 1, 0.25, 0]

// 在canvas中使用
const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');
ctx.transform(...matrix);
// 绘制原始矩形，会近似映射到你想要的形状
ctx.strokeRect(0, 0, 1, 1);

额外说明 #

• 当输入的to点本身符合仿射变换特性（平行线保留），这个函数会返回精确的矩阵，和你原来的函数效果完全一致。
• 所有辅助函数都是原生JS实现，不需要依赖任何外部库，直接就能用。
• 这个方法的本质是找“最优拟合”，没法让每个点都完美匹配，但整体误差是最小的。

内容的提问来源于stack exchange，提问作者mini.daniel