图形变换原理

概述:

图形变换大体分为缩放,平移,拉伸,旋转.他们的原理是矩阵的乘法.

矩阵的乘法:

矩阵的乘法规则:
两个矩阵相乘,用第一个矩阵的行乘以第二个矩阵的列,然后相加.
例:

1 * x + 0 * y + 0 * 1 = x
0 * x + 1 * y + 0 * 1 = y
0 * x + 0 * y + 1 * 1 = 1

缩放

3*3矩阵对角线,x,y,z的缩放比例

image.png

我们将单位矩阵的中心点数据改为2,乘以投影矩阵,得到x,2y,0,将原图的4个坐标点带入,可以得到黄色图形,即沿y轴拉伸了两倍长度.
同理,如果将组上角数据改为2,图形沿x轴拉伸两倍,即蓝色图形

平移

image.png

我们改变单位矩阵的最后一列,可以控制图形平移
如:
将最后一列第二行改为2,得到x,y+2,1.带入图形坐标,得到黄色图形,即沿y轴平移了2个单位距离
同理,将右上角的数据改为2,得到图中蓝色图形,即沿y轴平移2个单位距离.

拉伸

image.png

改变单位矩阵第一行第二列,第二行第一列可以控制图形沿x轴和y轴 的拉伸
如:
将第二行第一列改为1,得到x,x+y,1,将原图坐标带入得到图中绿色图形,可以看到,图形被沿x轴拉伸了一个单位,变成了一个平行4边形.
同理,我们将第一行第二列改为1,可以得到图中蓝色图形,即沿y轴方向拉伸了一个单位的图形.

旋转

image.png

图形旋转是根据角度来计算的,所以要用到三角函数
如图:
我们将单位矩阵改为图中所示,如果是边长为1矩形,根据勾股定理,可以得出投影后的矩阵为xcos30-ysin30,xsin30+ycos30,1.将原图的坐标点带入,可以得到图中红色虚线的图形,即将原图以0,0为原点,向左后方旋转30度的图形.
若要以中心点为原点旋转,需要先将图形向右平移,再旋转,再向左平移回来.
如图中绿色图形所示