看懂这篇文章需要会矩阵相乘的运算,以及矩阵相乘在图形学里的意义。大学线性代数这门课,学过矩阵的乘法,没有学过也没事,也能体会得到。我在文章里提供了 codepen 的示例,可以清晰的了解到。
平移矩阵
一个矩阵,我们都用 JavaScript 的一个数组来表示:
let matrix = [
1, 0, 0,
0, 1, 0,
tx, ty, 1
]
对于一个坐标为 [x, y, 1]
的点,和这个矩阵相乘后为 [x + tx, y + ty, 1]
。
缩放矩阵
let matrix = [
sx, 0, 0,
0, sy, 0,
0, 0, 1
]
相乘结果为 [x * sx, x * sy, 1]
。
旋转矩阵
let matrix = [
cosa, sina, 0,
-sina, cosa, 0,
0, 0, 1
]
旋转的角度为 a,相乘就是 [x * cosa + y * -sina, x * sina + y * cosa, 1]
。
skew 矩阵
let matrix = [
1, skewY, 0,
skewX, 1, 0,
0, 0, 1
]
其中的 skewX、skewY 值是角度的正切 tan 值。相乘就是 [x + skewX * y, skewY * x + y, 1]
。怎么理解这种变形的几何意义呢?假设只在 x 轴方向应用 skew,那么就是将所有的 x 的坐标值加上 y 乘以 skewX
的值,在 x 轴上的坐标值就会变大或者变小,看起来拉伸起来了。同理,对 y 轴的效果也是一样。
codepen
See the Pen 旋转矩阵 by zeng (@zengxiaoluan) on CodePen.
《图形变换与矩阵相乘》有一个想法