图形变换基础

0. 前言

本周做了一些2D绘制图的工作,其中涉及到了图形的基本变换,这里简单做个总结。

本部分主要涉及矩阵的变换,参考:矩阵基础线性变换

图形变换的内容主要参考:旋转变换

1. 移动

图形的移动就是坐标的移动:

x' = x + ΔX

y' = y +ΔY

移动用2维矩阵没法表达直接表达,增加到3维即可表达:

2. 伸缩

图形的伸缩是坐标的乘以一个伸缩系数:

x' = ax

y' = by

用矩阵表达如下:

3. 旋转

旋转比较复杂一点,可以分成绕圆心旋转,以及绕任一点旋转

绕圆心旋转

图像旋转

旋转前:

x = r cosφ

y = r sinφ

旋转后:

x' = r cos(φ+θ) = r cosφ cosθ - r sinφ sinθ

y' = r sin(φ+θ) = r sinφ cosθ + r sinθ cosφ

带入后得:

x' = cosθ x - sinθ y

y' = sinθ x + cosθ y

矩阵表达如下:

绕任一点旋转

绕任一点旋转是个难点,它可以变成旋转与移动的组合,思路如下:

  1. 首先将旋转点移动到原点处
  2. 执行绕原点的旋转
  3. 再将旋转点移回到原来的位置

移动与旋转都是线性的,根据矩阵的线性变化可以写成:

4. 小结

通过引入齐次坐标,可以将图像的移动、伸缩、旋转统一到一个空间中来进行变换。

这样进行变化,就可以想矩阵的线性变化一样,乘以响应的变化矩阵即可。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×