2D平面中关于矩阵(Matrix)跟图形变换的讲解
在二维平面上,常用的有以下三种基本的图形变化:
1)Translation
2)Scale
3)Rotation
在canvas的开发中,我们也经常会用到这样的一些图形变换,尤其是我们在写自定义View时,更是会经常利用到Matrix来实现一些效果,比如平移,旋转,缩放及切变等,相信很多朋友应该很想知道,矩阵实现这种变换的原理是什么,什么是矩阵的左乘右乘,它们在实现效果上有什么差别吗?今天就让我们一起来看一下吧。
都是由点组成的
平面上的元素,就是点,线,面,而线就是由一个个点组成的,而是由一条条线组成的,所以归根结底,平面上所有的图形都是由点组成的。而在我们坐标系中,一个点就是由一对x,y值组成的,p = {x, y}。而在平面上,过两点间的,我们可以画一条直线,所以我们一般通过 p1, p2可定义一条直线,e = {p1, p2},而图形呢,则是由众多的点和点之间的的线段组成的。所以,其实平面上的图形变换,就是点坐标位置的变换。
在平面上,一个点,可以通过一个向量或者矩阵来表示:
而下面这条红色的直线则是由一组组的点组成的,起始点是(120,0),终点是(240,120)。
Translation(平移)
如果我们现在要平移这条直线,向右120(tx),向下120(ty),那么新的点会是怎么样呢?很显然,起始点就会是(240,120),而终点就会是(360,240),效果如下:
绿色的线就是平移后的线了,可以看出每一个新的点的值是
这样的一个变换translation也可以用一对值来表示,t = {tx, ty},其中tx是在x坐标上的偏移量,而ty是在y坐标上的偏移量。移动点 p 到 p',我们只要加上这个偏移就行,如果用矩阵或者向量来表示就是:
(可能会有朋友觉得奇怪,怎么是加呢,canvas里面矩阵不都是乘吗?这是什么原因呢?)
Scale(缩放)
那如果我们对这条直线进行放大呢,比如放大2倍呢,一般来讲,我们缩放,是指所有维度的缩放,当然在这里就只有x坐标跟y坐标,当然也可以只针对一个维度,但是就会变形了哦。我们先看一下放大到2倍的效果和只放大列的效果吧。
很显然,两边都放大的话,起始点由(120,0)变成(240,0),终点由(240,120)变成(480,240)。而如果只放大列的话,起始点的坐标是不变的。而且我们可以看到,放大的时候,线也跟着向右平移了一个单位,为什么会这样呢?这是因为缩放是基于原点(0,0)的,在canvas中,也就是屏幕的左上角,但缩放的位数大于1的时候,就会远离原点,而相反,当缩放的位数小于1时,则会趋近原点。
缩放的变换是由下面的矩阵来表示的:
那么缩放后的直线的点就是:![](https://blog.csdn.net/linmiansheng/article/details/18801947)
各位朋友,可以想一下,这样直接Scale的话,这个图形可是会平移的哦,如果不想要平移,应该怎么办?
Rotation(旋转)
我们再看一下下图,这条直线顺时针旋转了45度,也就是往逆时针方向旋转了 - 45 度
那么新的点是怎么算出来的呢?
逆时针(注意这里)旋转的矩阵表示是:(至于为什么是这个矩阵,请查看文章结尾处附图)
同样的,旋转后的点就是根据下面的矩阵相乘而得出来的结果:
我们可以将我们的点代进去求解
可得新的起始点P0'为(84.85,84.85),而新的结束点为:(84.85,254.56)
以结束点为例,将-45度带入公式:
x=240*Math.cos(-45/180*Math.PI)+120*Math.sin(-45/180*Math.PI) 计算结果84.85
y=-240*Math.sin(-45/180*Math.PI)+120*Math.cos(-45/180*Math.PI) 计算结果254.56
可看出,刚好是上面绿色线所在的地方。
Combine Transformation (组合变换)
对于Scale 和 Rotation 来说,它们都是基于原点(0,0)的变换,那如果我们要让它基于某个点缩放或者旋转,就比如绕着起始点转呢,而这也经常是我们想要的一种效果。这个点就是所谓的旋转,而解决办法其实就是将图形先平移到原点,再进行缩放或者旋转的变化,然后再移回来,就可以了。
假设这三种变换的矩阵表示如下:
那么它应该实施的变换就如下:先平移 T 到原点,再基于原点进行缩放(或者旋转),然后再平移回去,
其实这一步,我们可以在Canvas的代码中看到的,如下:
1 /**
2 * Preconcat the current matrix with the specified scale.
3 *
4 * @param sx The amount to scale in X
5 * @param sy The amount to scale in Y
6 * @param px The x-coord for the pivot point (unchanged by the scale)
7 * @param py The y-coord for the pivot point (unchanged by the scale)
8 */
9 public final void scale(float sx, float sy, float px, float py) {
10 translate(px, py);
11 scale(sx, sy);
12 translate(-px, -py);
13 }
上面代码中的轴点的实现,其实就是对于平移的来回操作,至于为什么是translate(px,py)在前,而translate(-px,py)在后呢,这涉及到矩阵左乘和右乘的计算,后面我们会谈到的。
Homogeneous Coordinates(齐次坐标)
在上面的矩阵中,我们可以看到平移的矩阵是相加的,而旋转跟缩放的矩阵都是相乘的,这样计算起来多麻烦呀!于是为了方便计算,大家都统一用一种方式来进行计算,聪明的计算机图形科学家,它们就设计出这样一种坐标系,叫homogeneous coordinates,而它的目的只是为了更加方便地去用矩阵来计算图形的变换,没有其他。
那什么是齐次坐标呢?
其实就是在原来2D的维度,再加上一个新的维度,多出来的维度的值永远是1,比如点的矩阵就变成:
而Translation(平移)的矩阵表示就变成:
这样,平移变换的加法就可以变成乘法:
而Scale(缩放)跟Rotation(旋转)相对应的矩阵也就变成:
看到这几个,大家发现了没有?没错,这几个就是我们canvas中用到的矩阵了。
当我们在Canvas上用Scale的时候,其实就是乘上S矩阵,当我们用Rotate的时候,其实就是乘上R矩阵,大家明白没有?
附图,解释旋转矩阵的由来:
在二维平面上,常用的有以下三种基本的图形变化:
1)Translation
2)Scale
3)Rotation
在canvas的开发中,我们也经常会用到这样的一些图形变换,尤其是我们在写自定义View时,更是会经常利用到Matrix来实现一些效果,比如平移,旋转,缩放及切变等,相信很多朋友应该很想知道,矩阵实现这种变换的原理是什么,什么是矩阵的左乘右乘,它们在实现效果上有什么差别吗?今天就让我们一起来看一下吧。
都是由点组成的
平面上的元素,就是点,线,面,而线就是由一个个点组成的,而是由一条条线组成的,所以归根结底,平面上所有的图形都是由点组成的。而在我们坐标系中,一个点就是由一对x,y值组成的,p = {x, y}。而在平面上,过两点间的,我们可以画一条直线,所以我们一般通过 p1, p2可定义一条直线,e = {p1, p2},而图形呢,则是由众多的点和点之间的的线段组成的。所以,其实平面上的图形变换,就是点坐标位置的变换。
在平面上,一个点,可以通过一个向量或者矩阵来表示:
而下面这条红色的直线则是由一组组的点组成的,起始点是(120,0),终点是(240,120)。
Translation(平移)
如果我们现在要平移这条直线,向右120(tx),向下120(ty),那么新的点会是怎么样呢?很显然,起始点就会是(240,120),而终点就会是(360,240),效果如下:
绿色的线就是平移后的线了,可以看出每一个新的点的值是
这样的一个变换translation也可以用一对值来表示,t = {tx, ty},其中tx是在x坐标上的偏移量,而ty是在y坐标上的偏移量。移动点 p 到 p',我们只要加上这个偏移就行,如果用矩阵或者向量来表示就是:
(可能会有朋友觉得奇怪,怎么是加呢,canvas里面矩阵不都是乘吗?这是什么原因呢?)
Scale(缩放)
那如果我们对这条直线进行放大呢,比如放大2倍呢,一般来讲,我们缩放,是指所有维度的缩放,当然在这里就只有x坐标跟y坐标,当然也可以只针对一个维度,但是就会变形了哦。我们先看一下放大到2倍的效果和只放大列的效果吧。
很显然,两边都放大的话,起始点由(120,0)变成(240,0),终点由(240,120)变成(480,240)。而如果只放大列的话,起始点的坐标是不变的。而且我们可以看到,放大的时候,线也跟着向右平移了一个单位,为什么会这样呢?这是因为缩放是基于原点(0,0)的,在canvas中,也就是屏幕的左上角,但缩放的位数大于1的时候,就会远离原点,而相反,当缩放的位数小于1时,则会趋近原点。
缩放的变换是由下面的矩阵来表示的:
那么缩放后的直线的点就是:![](https://blog.csdn.net/linmiansheng/article/details/18801947)
各位朋友,可以想一下,这样直接Scale的话,这个图形可是会平移的哦,如果不想要平移,应该怎么办?
Rotation(旋转)
我们再看一下下图,这条直线顺时针旋转了45度,也就是往逆时针方向旋转了 - 45 度
那么新的点是怎么算出来的呢?
逆时针(注意这里)旋转的矩阵表示是:(至于为什么是这个矩阵,请查看文章结尾处附图)
同样的,旋转后的点就是根据下面的矩阵相乘而得出来的结果:
我们可以将我们的点代进去求解
可得新的起始点P0'为(84.85,84.85),而新的结束点为:(84.85,254.56)
以结束点为例,将-45度带入公式:
x=240*Math.cos(-45/180*Math.PI)+120*Math.sin(-45/180*Math.PI) 计算结果84.85
y=-240*Math.sin(-45/180*Math.PI)+120*Math.cos(-45/180*Math.PI) 计算结果254.56
可看出,刚好是上面绿色线所在的地方。
Combine Transformation (组合变换)
对于Scale 和 Rotation 来说,它们都是基于原点(0,0)的变换,那如果我们要让它基于某个点缩放或者旋转,就比如绕着起始点转呢,而这也经常是我们想要的一种效果。这个点就是所谓的旋转,而解决办法其实就是将图形先平移到原点,再进行缩放或者旋转的变化,然后再移回来,就可以了。
假设这三种变换的矩阵表示如下:
那么它应该实施的变换就如下:先平移 T 到原点,再基于原点进行缩放(或者旋转),然后再平移回去,
其实这一步,我们可以在Canvas的代码中看到的,如下:
1 /**
2 * Preconcat the current matrix with the specified scale.
3 *
4 * @param sx The amount to scale in X
5 * @param sy The amount to scale in Y
6 * @param px The x-coord for the pivot point (unchanged by the scale)
7 * @param py The y-coord for the pivot point (unchanged by the scale)
8 */
9 public final void scale(float sx, float sy, float px, float py) {
10 translate(px, py);
11 scale(sx, sy);
12 translate(-px, -py);
13 }
上面代码中的轴点的实现,其实就是对于平移的来回操作,至于为什么是translate(px,py)在前,而translate(-px,py)在后呢,这涉及到矩阵左乘和右乘的计算,后面我们会谈到的。
Homogeneous Coordinates(齐次坐标)
在上面的矩阵中,我们可以看到平移的矩阵是相加的,而旋转跟缩放的矩阵都是相乘的,这样计算起来多麻烦呀!于是为了方便计算,大家都统一用一种方式来进行计算,聪明的计算机图形科学家,它们就设计出这样一种坐标系,叫homogeneous coordinates,而它的目的只是为了更加方便地去用矩阵来计算图形的变换,没有其他。
那什么是齐次坐标呢?
其实就是在原来2D的维度,再加上一个新的维度,多出来的维度的值永远是1,比如点的矩阵就变成:
而Translation(平移)的矩阵表示就变成:
这样,平移变换的加法就可以变成乘法:
而Scale(缩放)跟Rotation(旋转)相对应的矩阵也就变成:
看到这几个,大家发现了没有?没错,这几个就是我们canvas中用到的矩阵了。
当我们在Canvas上用Scale的时候,其实就是乘上S矩阵,当我们用Rotate的时候,其实就是乘上R矩阵,大家明白没有?
附图,解释旋转矩阵的由来,及转换:
![](https://img2020.cnblogs.com/blog/449809/202103/449809-20210331184052553-653073420.jpg)
![](https://img2020.cnblogs.com/blog/449809/202103/449809-20210331184140229-1766302539.jpg)
![](https://img2020.cnblogs.com/blog/449809/202103/449809-20210331184301153-2081369243.jpg)
![](https://img2020.cnblogs.com/blog/449809/202103/449809-20210331184224012-250395912.jpg)
主要参照:https://blog.csdn.net/linmiansheng/article/details/18801947
关于矩阵左乘右乘,前乘后乘的关系,如果有困惑的朋友,可以看一下下面这篇文章:
https://blog.csdn.net/linmiansheng/article/details/18820599
另外矩阵相关文章:
https://www.cnblogs.com/fangsmile/p/5651429.html