写点什么

Android Matrix 矩阵,跨平台移动开发 ui

用户头像
Android架构
关注
发布于: 2021 年 11 月 05 日

用 A 的第 1 行各个数与 B 的第 3 列各个数对应相乘后加起来,就是乘法结果中第 1 行第 3 列的数;


依次求出第二行和第三行即可。


假设 3*3 矩阵与 3*2 矩阵乘法种的项分别为:a11? a12? a13 a21? a22? a23? a31? a32? a33 和 b11? b12? b21? b22? b23,


则新的得到的矩阵:第一项为 c11=a11*c11+a12*c21+a13*c31 剩余项依次类推即可。


2、Matrix 矩阵


==========


根据文章 1 而写


2.1、概述




Matrix 是 Android 中用于处理图形的一个 3*3 的矩阵。


2.2、原理




先看看 matrix 的矩阵是什么样子的:



源码:


public static final int MSCALE_X = 0; //!< use with getValues/setValues


public static final int MSKEW_X = 1; //!< use with getValues/setValues


public static final int MTRANS_X = 2; //!< use with getValues/setValues


public static final int MSKEW_Y = 3; //!< use with getValues/setValues


public static final int MSCALE_Y = 4; //!< use with getValues/setValues


public static final int MTRANS_Y = 5; //!< use with getValues/setValues


public static final int MPERSP_0 = 6; //!< use with getValues/setValues


public static final int MPERSP_1 = 7; //!< use with getValues/setValues


public static final int MPERSP_2 = 8; //!< use with getValues/setValues


那么这个矩阵分别代表了什么呢,这里通过他们的名字可以看出,scale 是缩放,skew 是错切,trans 是平移,persp 代表透视(官方文档中,也没有详细讲解,透视在这里只做简单介绍)。这里需要把矩阵根据他们的作用划分为 4 块:



如上图所示,这四块区域各有作用。后面会详细讲解各个作用,先来看看这个矩阵是如何影响图像的。先看看屏幕的坐标系:



看上图,这里表示了屏幕的坐标系,其中的 x,y 轴是大家所熟知的,但是其实,一个物体他是存在于一个三维空间的,所以必然会有 z 轴。我们的屏幕,就像是一个窗口,透过它,我们看到了屏幕后面的世界,那里面有各种物体,我们看到的是映射在 x,y 平面上的一个投射图像。屏幕就像是一个镜头一样,将里面的物体映射到 x,y 平面上,成为一个二维的图像。那么如果,我们把屏幕这个镜头沿着 z 轴,拉远或者拉进,那么图像会有什么变化呢,肯定会变小或者变大。就好比坐在飞机上透过窗口看地面的汽车,和在地面上看到的大小是不同的。


结论就是,在屏幕上显示的像素,不仅仅有 x,y 坐标,其实还有 z 轴的影响。所以这里对应的像素描述由一个 3 行一列的矩阵来表示:



x,y 分别代表 x,y 轴上的坐标,而 1 代表屏幕在 z 轴上的坐标为默认的。如果将 1 变大,那么屏幕会拉远, 图形会变小。


现在我们来看看 matrix 怎么作用于每个像素的值。这里需要用到矩阵的乘法,首先需要明确的是,矩阵的前乘和后乘是不相同的,也就是说不满足乘法交换律。


这里我们通过一个旋转变换来看看原理,其实一张图片围绕一个点旋转,也就是所有的点都围绕一个点旋转,所以只需要关注一个点的情况即可:


假定有一个点 ,相对坐标原点顺时针旋转后的情形,同时假定 P 点离坐标原点的距离为 r,如下图:



那么就有:



换做矩阵运算就如下图:



同时,可以看到,上面的矩阵四块区域的切分也是因为矩阵乘法的操作决定的,由于这里的乘法运算中,左上角的四个值,可以和 x,y 值做乘法运算,所以可以影响到旋转等操作,而右上角的模块,只能做加法,所以只能影响到平移。右下角的模块主要管 z 轴,自然就可以进行等比的缩放了,左下角的模块一般不去动他,否则会把 x,y 值加入到 z 轴中来,会不可控。


3、基本方法分析


========


讲解完了 matrix 作用于像素点的原理之后,我们逐个讲解它的方法。


3.1、构造函数




public Matrix()


public Matrix(Matrix src)


构造函数有两个,第一个是直接创建一个单位矩阵,第二个是根据提供的矩阵创建一个新的矩阵(采用 deep copy)


单位矩阵如下:



3.2、isIdentity 与 isAffine




public boolean isIdentity()//判断是否是单位矩阵


public boolean isAffine()//判断是否是仿射矩阵


是否是单位矩阵很简单,就不做讲解了,这里是否是仿射矩阵可能大家不好理解。


首先来看看什么是仿射变换。仿射变换其实就是二维坐标到二维坐标的线性变换,保持二维图形的“平直性”(即变换后直线还是直线不会打弯,圆弧还是圆弧)和“平行性”(指保持二维图形间的相对位置关系不变,平行线还是平行线,而直线上点的位置顺序不变),可以通过一系列的原子变换的复合来实现,原子变换就包括:平移、缩放、翻转、旋转和错切。这里除了透视可以改变 z 轴以外,其他的变换基本都是上述的原子变换,所以,只要最后一行是 0,0,1 则是仿射矩阵。


3.3、rectStaysRect




public boolean rectStaysRect()


判断该矩阵是否可以将一个矩形依然变换为一个矩形。当矩阵是单位矩阵,或者只进行平移,缩放,以及旋转 90 度的倍数的时候,返回 true。


3.4、reset




public void reset()


重置矩阵为单位矩阵。?


3.5、setTranslate




public void setTranslate(float dx, float dy)


设置平移效果,参数分别是 x,y 上的平移量。?


效果图如下:



代码如下:


Matrix matrix = new Matrix();


canvas.drawBitmap(bitmap, matrix, paint);


matrix.setTranslate(100, 1000);


canvas.drawBitmap(bitmap, matrix, paint);


3.6、setScale




public void setScale(float sx, float sy, float px, float py)


public void setScale(float sx, float sy)


两个方法都是设置缩放到 matrix 中,sx,sy 代表了缩放的倍数,px,py 代表缩放的中心。这里跟上面比较类似不做讲解了。


3.7、setRotate




public void setRotate(float degrees, float px, float py)


public void setRotate(float degrees)


和上面类似,不再讲解。?


3.8、setSinCos




public void setSinCos(float sinValue, float cosValue, float px, float py)


public void setSinCos(float sinValue, float cosValue)


这个方法乍一看可能有点蒙,其实在前面的原理中,我们讲解了一个旋转的例子,他最终的矩阵效果是这样的:



其实旋转,就是使用了这样的 matrix,显而易见,这里的参数就清晰了。?


sinValue:对应图中的 sin 值?


cosValue:对应 cos 值?


px:中心的 x 坐标?


py:中心的 y 坐标


看一个示例,我们把图像旋转 90 度,那么 90 度对应的 sin 和 cos 分别是 1 和 0。



看代码如下:


Matrixmatrix = new Matrix();


matrix.setSinCos(1, 0, bitmap.getWidth() / 2, bitmap.getHeight() / 2);


canvas.drawBitmap(bitmap, matrix, paint);


3.9、setSkew




public void setSkew(float kx, float ky, float px, float py)


public void setSkew(float kx, float ky)


错切,这里 kx,ky 分别代表了 x,y 上的错切因子,px,py 代表了错切的中心。不了解错切了在前面[canvas 变换](


)中去查看,这里不再讲解。?


3.10、setConcat




public boolean setConcat(Matrix a,Matrix b)


将当前 matrix 的值变为 a 和 b 的乘积,它的意义在下面的 进阶方法中来探讨。


4、进阶方法解析


============


上面的基本方法中,有关于变换的 set 方法都可以带来不同的效果,但是每个 set 都会把上个效果清除掉,例如依次调用了 setSkew,setTranslate,那么最终只有 setTranslate 会起作用,那么如何才和将两种效果复合呢。Matrix 给我们提供了很多方法。但是主要都是 2 类:


preXXXX:以 pre 开头,例如 preTranslate?


postXXXX:以 post 开头,例如 postScale


他们分别代表了前乘,和后乘。看一段代码:


Matrix matrix = new Matrix();


matrix.setTranslate(100, 1000);


matrix.preScale(0.5f, 0.5f);


这里 matrix 前乘了一个 scale 矩阵,换算成数学式如下:



从上面可以看出,最终得出的 matrix 既包含了缩放信息也有平移信息。?


后乘自然就是 matrix 在后面,而缩放矩阵在前面,由于矩阵前后乘并不等价,也就导致了他们的效果不同。我们来看看后乘的结果:



可以看到,结果跟上面不同,并且这也不是我们想要的结果,这里缩放没有更改,但是平移被减半了,换句话说,平移的距离也被缩放了。所以需要注意前后乘法的关系。


来看看他们对应的效果图:


前乘:



后乘:



可以明显看到,后乘的平移距离受了影响。


了解清除了前后乘的意义,在使用的过程中,多个效果的叠加时,一样要注意,否则效果达不到预期。


5、其他方法解析


========


matrix 除了上面的方法外,还有一些其他的方法,这里依次解析


5.1、setRectToRect




public boolean setRectToRect(RectF src, RectF dst, ScaleToFit stf)


将 rect 变换成 rect,上面的 rectStaysRect 已经说过,要保持 rect 只能做缩放平移和选择 90 度的倍数,那么这里其实也是一样,只是这几种变化,这里通过 stf 参数来控制。


ScaleToFit 有如下四个值:


FILL: 可能会变换矩形的长宽比,保证变换和目标矩阵长宽一致。?


START:保持坐标变换前矩形的长宽比,


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


并最大限度的填充变换后的矩形。至少有一边和目标矩形重叠。左上对齐。?


CENTER: 保持坐标变换前矩形的长宽比,并最大限度的填充变换后的矩形。至少有一边和目标矩形重叠。?


END:保持坐标变换前矩形的长宽比,并最大限度的填充变换后的矩形。至少有一边和目标矩形重叠。右下对齐。


这里使用谷歌的 api demo 的图片作为例子:



5.2、setPolyToPoly




public boolean setPolyToPoly(float[] src, int srcIndex,float[] dst, int dstIndex,int pointCount)


通过指定的 0-4 个点,原始坐标以及变化后的坐标,来得到一个变换矩阵。如果指定 0 个点则没有效果。


下面通过例子分别说明 1 到 4 个点的可以达到的效果:

5.2.1、1 个点,平移?

只指定一个点,可以达到平移效果:



代码如下:


float[] src = {0, 0};


int DX = 300;


float[] dst = {0 + DX, 0 + DX};


matrix.setPolyToPoly(src, 0, dst, 0, 1);


canvas.drawBitmap(bitmap, matrix, paint);

5.2.2、2 个点,旋转或者缩放

两个点,可以达到旋转效果或者缩放效果,缩放比较简单,这里我们来看旋转效果,一个点指定中心,一点指出旋转的效果



代码如下:


int bw = bitmap.getWidth();


int bh = bitmap.getHeight();


float[] src = {bw / 2, bh / 2, bw, 0};


float[] dst = {bw / 2, bh / 2, bw / 2 + bh / 2, bh / 2 + bw / 2};


matrix.setPolyToPoly(src, 0, dst, 0, 2);


canvas.drawBitmap(bitmap, matrix, paint);

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Android Matrix矩阵,跨平台移动开发ui