前言
在 Android 开发中,矩阵是一个功能强大并且应用广泛的神器,但是就是看不懂,线性代数白学了。
准备
谷歌官方文档是个好东西!
安卓自定义View进阶-Matrix原理
深入理解 Android 中的 Matrix
开整
The Matrix class holds a 3x3 matrix for transforming coordinates.
说明这是一个 3x3的矩阵。
详细的说明如下图:
基本方法解析
我们根据安卓文档上面的方法进项讲解。
(1) 构造函数
1. public Matrix ()
Create an identity matrix 创建单位矩阵
2. public Matrix (Matrix src)
Create a matrix that is a (deep) copy of src 复制一个矩阵
/**
* 初始化。
*/
private void initValue() {
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.matrix);
matrix = new Matrix();
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setTextSize(30);
getMatrixValues();
}
private void getMatrixValues() {
float[] values = new float[9];
matrix.getValues(values);
matrixValues = toMatrixValues(values);
LoggerUtils.i("float[] values " + matrixValues);
postInvalidate();
}
/**
* 拼接为相应的value值
*
* @param values 数组
* @return 返回一个字符串
*/
public static String toMatrixValues(float[] values) {
if (values == null)
return "null";
int iMax = values.length - 1;
if (iMax == -1) {
return "[]";
}
StringBuilder b = new StringBuilder();
b.append("\n");
b.append('[');
for (int i = 0; ; i++) {
b.append(values[i]);
if (i == iMax) {
return b.append(']').toString();
}
b.append(", ");
if (i == 2) {
b.append("\n ");
}
if (i == 5) {
b.append("\n ");
}
}
}
打印出的值如下:
[1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0]
得到的效果图如下:
(2) 矩阵属性
public boolean isIdentity () //是否是单位矩阵
public boolean isAffine () //是否是仿射矩阵
仿射变换,看了,没看懂。那就记住只要最后一行是0,0,1则是仿射矩阵。
(3) reset
public void reset() //重置矩阵为单位矩阵。
(4) 缩放(Scale)
对于单个坐标来说,缩放只要将其坐标值值乘以缩放值即可。
假设对某个点宽度缩放 k1 倍,高度缩放 k2 倍,该点坐标为 x0、y0,缩放后坐标为 x、y,那么缩放的公式如下:
我们现在知道了缩放对应矩阵中的两个值的位置以及上面的公式,那现在在用矩阵来描述缩放操作:
等号左边的矩阵就是计算后的缩放结果。
Matrix 中用于缩放操作的方法有如下两个:
public void setScale (float sx, float sy)
public void setScale (float sx, float sy, float px, float py);
前面两个参数 sx、sy,分别是宽和高的缩放比例。
第二个重载方法多了两个参数 px、py,这两个参数用来描述缩放的枢轴点,关于枢轴点的含义可以看下注释:
Set the matrix to scale by sx and sy, with a pivot point at (px, py). The pivot point is the coordinate that should remain unchanged by the specified transformation.
大概说枢轴点是指定转换应保持不变的坐标。
当我们不传这两个参数时,枢轴点默认为左上角的点,缩放都是向下和向右,所以枢轴点可以大概的理解为缩放的锚点,缩放从这个点开始向四周扩散。
我们用矩阵来描述一下就能明白了。
- 调用2个参数缩放方法:
matrix.setScale(0.5f, 0.5f);
缩放 0.5 倍,调用该方法后矩阵变换为:
[0.5, 0.0, 0.0,
0.0, 0.5, 0.0,
0.0, 0.0, 1.0]
得到效果如下:
- 调用4个参数缩放方法:
matrix.setScale(0.5f, 0.5f, 100f, 200f);
缩放 0.5 倍,调用该方法后矩阵变换为:
[0.5, 0.0, 50.0,
0.0, 0.5, 100.0,
0.0, 0.0, 1.0]
实际上我们设置了枢轴点后 Matrix 会做一次位移操作。
如图所示:
5. 位移(Translate)
位移操作是指将坐标(x0,y0)平移一定的距离,我们直接将坐标加上平移的距离即可得到平移后的坐标:
用矩阵表示:
用于设置位移操作的只有一个方法:
public void setTranslate (float dx, float dy)
代码如下:
matrix.setTranslate(50f, 100f);
得到的矩阵如下:
[1.0, 0.0, 100.0,
0.0, 1.0, 50.0,
0.0, 0.0, 1.0 ]
得到的图像如下:
6. 错切(Skew)
错切不好讲,我们先看一下公式,如下:
用矩阵表示:
错切操作的方法:
void setSkew(float kx, float ky);
void setSkew(float kx, float ky, float px, float py);
我们用代码验证一下:
matrix.setSkew(1f, 0f);
得到的矩阵如下:
[1.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0]
得到的图像如下:
我们上面是设置的x,下面我们设置y:
matrix.setSkew(0f, 1f);
得到的矩阵如下:
[1.0, 0.0, 0.0,
1.0, 1.0, 0.0,
0.0, 0.0, 1.0]
得到的图像如下:
如果x和y,我们都设置:
matrix.setSkew(1f, 1f);
得到的矩阵如下:
[1.0, 1.0, 0.0,
1.0, 1.0, 0.0,
0.0, 0.0, 1.0]
那么图形会是什么样子的呢??小伙伴可以试试。
7. 旋转(Rotation)
我们分析围绕坐标原点旋转:
假定有一个点,相对坐标原点顺时针旋转后的情形,同时假定P点离坐标原点的距离为r,如下图:
那么,
如果用矩阵,就可以表示为:
用矩阵表示:
我们用代码验证一下:
matrix.setRotate(30);
得到的矩阵如下:
[0.8660254, -0.5, 0.0,
0.5, 0.8660254, 0.0,
0.0, 0.0, 1.0]
得到的图像如下:
8. 串连接(Concat)
Matrix类还提供了直接矩阵计算方式。Matrix a=new Matrix()相当于创建一个单位矩阵。
- a.set(b),就是赋值a = b;
- a.preConCat(b),相当于前乘,即 a=a×b;
- a.postConCat(b),相当于前乘,即 a=b×a;
- c.setConcat(a,b),相当于c=a×b;
我们用代码验证:
public void showSetConcat() {
Matrix matrix1 = new Matrix();
matrix1.setTranslate(100, 100);
Matrix matrix2 = new Matrix();
matrix2.setScale(50, 200);
matrix.setConcat(matrix1, matrix2);
getMatrixValues();//showSetScale
}
得到的矩阵如下:
[50.0, 0.0, 100.0,
0.0, 200.0, 100.0,
0.0, 0.0, 1.0]
得到一个有位移,放大的图片,如下:
9. 正余弦的使用
我们看一下官方解释:
public void setSinCos (float sinValue, float cosValue)
Set the matrix to rotate by the specified sine and cosine values.
还是说旋转,那就和setRotate一样的现象。
上面我们验证了setRotate。
matrix.setRotate(30);
得到的矩阵如下:
[0.8660254, -0.5, 0.0,
0.5, 0.8660254, 0.0,
0.0, 0.0, 1.0]
我们使用setSinCos 验证一下:
matrix.setSinCos(0.5f, 0.8660254f);
得到的矩阵如下:
[0.8660254, -0.5, 0.0,
0.5, 0.8660254, 0.0,
0.0, 0.0, 1.0]
得到的图像如下:
setSinCos 和 setRotate 可以达到同样的效果。
Matrix 复合变换
上面我们在介绍这几种变换的同时也说了他们对应的方法,可以看到他们都是 set 方法,但 Matrix 中实际上提供了三种操作,分别是:设置(set)、前乘(pre)以及后乘(post)。
我们主要讲几个主要的 set 方法与之对应的 pre 及 post 方法,方法列表如下:
//scale
boolean preScale(float sx, float sy);
boolean preScale(float sx, float sy, float px, float py);
boolean postScale(float sx, float sy);
boolean postScale(float sx, float sy, float px, float py);//translate
boolean preTranslate(float dx, float dy);
boolean postTranslate(float dx, float dy);//skew
boolean preSkew(float kx, float ky);
boolean preSkew(float kx, float ky, float px, float py);
boolean postSkew(float kx, float ky);
boolean postSkew(float kx, float ky, float px, float py);//rotate
boolean preRotate(float degrees);
boolean preRotate(float degrees, float px, float py);
boolean postRotate(float degrees);
boolean postRotate(float degrees, float px, float py);
设置(set)
如果我们不需要考虑复合变换的情况,一般可以直接使用 set 方法,因为 set 方法会重置之前的 Matrix 状态,导致之前设置的变换失效。
前乘(pre)
前乘相当于矩阵右乘:
假设当前矩阵 M 为:
[1.3, 0.0, 0.0,
0.0, 1.3, 0.0,
0.0, 0.0, 1.0]
我们使用 pre 方法做一个平移操作:
matrix.preTranslate(100, 100);
变换过程如下:
后乘(post)
后乘相当于矩阵左乘:
我们用上面的矩阵 M 举个例子,同样对其做一个平移操作,但是使用 post 方法:
matrix.postTranslate(100, 100);
变换过程如下:
这里的前乘后乘的概念主要是由于矩阵不符合乘法交换律引起的,我们使用时一定要注意,除此之外,调用顺序的不同对其结果也有影响,所以我们在使用时需要先确定好矩阵的变换方式,过程之后,再决定如何使用这些方法。
总结
借用网上的一张图,来总结:
Demo地址