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

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

js 复制代码
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 坐标系的坐标转为画布内容坐标) 这里我们就需要通过 inversetransfromPoint 两个方法

关键函数

js 复制代码
      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);
      }
相关推荐
一枚前端小能手4 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码4 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA910 分钟前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登11 分钟前
【CSS】层叠上下文和z-index
前端·css
鹏多多12 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus14 分钟前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom15 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia21 分钟前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_9284115623 分钟前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Pedantic25 分钟前
SwiftUI ShareLink – 显示分享表单的使用
前端