DOMMatrix 矩阵的具体应用: 坐标变换, 让你从繁杂的数学运算中解放出来!

矩阵

在计算机中图形的世界里, 我们往往使用矩阵来表达变换. 这些变换包括 平移 (Translation) 旋转 (Rotation) 缩放 (Scaling) 剪切 (Shear) 和 反射 (Reflection)

对于二维世界中的变换, 我们往往使用 3 × 3 的矩阵表示上述变换. 上面的变换统称为仿射变换. 下面是一个二维变换中的放射变换矩阵

线性变换和仿射变换 对于二维世界而言, 线性变换矩阵是一个 2 × 2 矩阵, 这个变换矩阵可以做到 Rotation Scaling Shearing, 再加一个 Reflection(反射)

放射变换多一个阶是为了表达平移, 𝑎、 𝑏、 𝑐、 𝑑 定义了线性变换部分，而 𝑡𝑥 和 𝑡𝑦 定义了平移部分

很自然想到的疑问是, 用 top left 和 scale 来表达变换有什么不好的地方呢? 用矩阵有什么特别的好处吗?

逆矩阵

使用矩阵, 最大的好处是可以很方便的表达逆变换. 使用逆变换, 可以很方便的做坐标系转换. 例如当📷相机相对屏幕移动了, 如何求出相机相对世界的坐标?

或者更加朴素一点, 画布上的内容是经过了一系列变换才开始绘制, 如何快速求出鼠标相对画布坐标系的位置?

DOMMatrix

canvas.getTransform() 得到的数据类型是 DOMMatrix 表示矩阵, 并且有两种表达形式, 一种是 𝑎、 𝑏、 𝑐、 𝑑、 𝑡𝑥、𝑡𝑦

另一种是一个4阶矩阵, 用 m11 ~ m44 表示, 这是为了统一 3D 和 2D 的放射变换, 所以用了四阶矩阵.

DOMMatrix 常见方法

构造一个 DOMMatrix

方法还蛮多的, 一种是 new DOMMatrix('matrix(1, 0, 0, 1, 0, 0)'); 不过 DOMMMatrix 还内置了很多静态方法用于创建一个新的矩阵, 例如 DOMMatrix.fromFloat32Array DOMMatrix.fromFloat64Array 以及 DOMMatrix.fromMatrix

还有一个不是创建新矩阵, 但是可以将当前矩阵通过一个参数变成你需要的矩阵, 有点类似 setTransform, matrix.setMatrixValue('matrix(1, 0, 0, 1, 30, 50)');

mutiply

用来表示两个矩阵的变换后的结果, 不过要注意顺序

let matrix1 = new DOMMatrix().translate(50, 50);
let matrix2 = new DOMMatrix().rotate(45);
let resultMatrix = matrix1.multiply(matrix2);
// resultMatrix 先应用 matrix2 的旋转，再应用 matrix1 的平移

inverse & invertSelf

自然就是逆矩阵啦, invertSelf 就是将当前矩阵变成其逆矩阵

translate, translateSelf, scale, scaleSelf, rotate, rotateSelf

见名知义

transfromPoint

将一个点应用变换, 返回应用当前矩阵变换后的点坐标

Demo

前面提到了一个场景, 当一个画布中的内容绘制之前经历了一系列变换, 那么如何将鼠标位置转换为画布内容的坐标呢? (也就是将相对 canvas 坐标系的坐标转为画布内容坐标) 这里我们就需要通过 inverse 和 transfromPoint 两个方法

关键函数

      const updateCursor = (e) => {
        const x = e.clientX - canvas.getBoundingClientRect().left;
        const y = e.clientY - canvas.getBoundingClientRect().top;
        const trans = ctx.getTransform();
        const inverse = trans.inverse();
        const pos = inverse.transformPoint({ x, y });
        cursorPos.x = pos.x;
        cursorPos.y = pos.y;
        drawCursor(pos);
      }