图形变换与矩阵相乘

看懂这篇文章需要会矩阵相乘的运算,以及矩阵相乘在图形学里的意义。大学线性代数这门课,学过矩阵的乘法,没有学过也没事,也能体会得到。我在文章里提供了 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.

扩展阅读

作者: 曾小乱

喜欢写点有意思的东西

《图形变换与矩阵相乘》有一个想法

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据