Android 自定义View学习(八)——Matrix知识学习

连接：https://www.jianshu.com/p/11e062284491

 

Matrix主要用于对图像的图形处理。前面学习的ColorMatirx主要是图像色彩的处理

学习资料

• Android 群英传
• Android Matrix
• android matrix最全方法详解与进阶(完整篇)

十分感谢 : )

1.Martrix 变形矩阵

Matrix是一个3 * 3的矩阵，每一个像素点表达了其坐标的X,Y信息

图形矩阵变换

处理每一个像素点的计算方法

X1 = a * X + b * Y + c
Y1 = d * X + e * Y + f
L  = g * X + h * Y + i

通常，g = h = 0 , i = 1，这时L = g * X + h * Y + i 恒成立，也就是L = i = 1

Matrix的初始化矩阵，对角线为1，其他为0

Matrix初始化矩阵

Matrix主要能够对图像作4种基本变换

• Translate 平移变换
• Rotate 旋转变换
• Scale 缩放变换
• Skew 错切变换

Matrix类中的方法，主要也是和这四个变换相关，只是对计算过程作了封装

做用对象是Bitmap而不是Canvas

2. Translate 平移变换

平移变换

红点p1平移到白点p时，坐标值

x = x1 + x0
y = y1 + y0

矩阵的形式：

平移变换矩阵

为了更好直观表现，先看原始效果

原始效果

private void init() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
    //画笔
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.parseColor("#FF4081"));
    //矩阵
    matrix = new Matrix();
    matrix.setTranslate(100f,100f);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.YELLOW);
    canvas.drawBitmap(bitmap,0,0,null);  
}

在布局文件中，控件的宽为match_parent，高为200dp，onDraw()方法中，canvas绘制底色为黄色，又绘制了原始了的bitmap。bitmap的大小是没有控件大的，屏幕右侧留下了一块黄色的区域。此时并无用到matrix

2.1 setTranslate()方法

Matrix中提供了一个setTranslate()方法，很容易就作到平移

简单修改代码

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.YELLOW);
    canvas.drawBitmap(bitmap,matrix,null);
    //在(100，100)处画一个圆  
    //用来辅助查看matrix做用后的坐标系
    canvas.drawCircle(100,100,30,paint);
}

平移后

根据小圆能够看出，matrix的平移对canvas的坐标系不会形成影响，不像canvas.traslate()方法。

matrix.setTranslate(100f,100f)，bitmap在x,y轴上移动了100个px。

代入到平移的公式中：

平移100个像素

 

最终

x = x1 + 100
y = y1 + 100

而超出了canvas的部分，则再也不显示

3. Rotate 旋转变换

旋转就是一个点围绕一个中心点旋转到新的位置

以原点的为旋转中心过程学习：

Rotate旋转图示

白点p(x0,yo)绕原点旋转β°后，获得红点p(x,y)

斜边为r，角度为α，利用三角函数，获得

x0 = r * cosα
y0 = r * sinα

同理，能够得出

x = r * cos(α + β) = r * cosα * cosβ - r * sinα * sinβ = x0 * cosβ - y0 * sinβ

y = r * sin(α + β) = r * sinα * cosβ + r * cosα * sinβ =  y0 * cosβ + x0 * sinβ

过程其实就是三角函数展开，矩阵的形式就是

旋转矩阵变换

根据计算结果y = y0 * cosβ + x0 * sinβ，须要注意sinβ和cosβ在矩阵的位置

上面的状况是以原点为旋转中心，任意点O为旋转中心进行旋转变换，通常有3个步骤：

1. 将坐标原点移动到任意点O
2. 使用上面的以坐标系原点为中心的旋转方法进行旋转
3. 将坐标原点还原

主要就是考虑任意点与原点的坐标错。然而使用setRotate()方法时，并不用考虑过多，都进行了封装

3.1 setRotate()方法

旋转方法有两个重载方法：

1. setRotate(float degrees)
2. setRotate(float degrees, float px, float py)

第一个方法简单使用，简单修改2.1中的代码

private void init() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
    matrix = new Matrix();
    matrix.setRotate(15);
}

围绕左上角旋转15度

默认以左上角为旋转中心，bitmap的宽为r进行旋转

第2个方法能够指定旋转中心O，float px就是O点的X轴坐标，float py就是O点的Y轴坐标

matrix.setRotate(15,bitmap.getWidth()/2,bitmap.getHeight()/2);

以Bitmap中心为旋转中心

以bitmap中心为旋转中心进行旋转15度

4.Scale 缩放变换

对于一个像素点来讲，不存在缩放的概念，但一个图像是由不少个像素点组成，将每一个点的坐标进行相同比例的缩放后，整个图像也就有了缩放的效果。

计算公式：

x = K1 * x0
y = k1 * y0

矩阵形式：

矩阵缩放变换

k1 就是要缩放的比例，负值无效，bitmap会不显示，0~1f缩小，k1 > 1 为放大

4.1 setScale() 缩放方法

这个方法也有两个重载方法

1. setScale(float sx, float sy)
2. setScale(float sx, float sy, float px, float py)

根据学习setRotate()方法，这个方法的两个重载方法比较好理解

第1个方法，简单使用

private void init() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
    matrix = new Matrix();
    matrix.setScale(0.5f,0.5f);
}

缩放二分之一

此时的缩放中心为bitmap的坐上角

第2个方法，简单使用

matrix.setScale(0.5f,0.5f,bitmap.getWidth()/2,bitmap.getHeight()/2);

以Bitmap中心缩放

此时就是以Bitmap的中心进行缩放，整个Bitmap的边缘向中间靠拢

5. Skew 错切变换

错切变换skew是一种比较特殊的线性变换，分为水平错切和垂直错切

5.1 水平错切

水平错切效果就是让全部像素点的Y轴坐标不变，X轴坐标按照比例进行平移，且平移的大小与该点到Y轴的距离成成正比

在坐标系中的效果：

水平错切

计算公式：

x = x0 + k1 * y0
y = y0

矩阵形式：

矩阵水平错切变换

X轴平移的值，是k1 * y0

5.2 垂直错切

垂直错切让全部像素点的X轴坐标不变，Y轴坐标按照比例进行平移，且平移的大小与该点到X轴的距离成成正比

在坐标系中的效果：

垂直错切

计算公式：

x = x0 
y = y0+ k2 * x0

矩阵形式：

矩阵垂直错切变换

5.3 两个方向都进行错切

当水平和垂直方向上都作错切变换时

计算公式：

x = x0 + k1 * y0
y = k2 * x0 * y0

矩阵形式：

水平和垂直都错切变换

不管水平还垂直错切，最终的效果其实就是由矩形变做平行四边形

5.3 setSkew() 错切方法

这个方法也有两个重载

1. setSkew(float kx, float ky)
2. setSkew(float kx, float ky, float px, float py)

第2个方法后面两个参数也是为了指定错切的中心

5.3.1 setSkew(float kx, float ky)第一个方法

水平错切：

private void init() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
    matrix = new Matrix();
    matrix.setSkew(0.25f,0f);
}

水平错切效果

kx就是k1，负值，向左切；正值向右切

垂直错切:

private void init() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
    matrix = new Matrix();
    matrix.setSkew(0f,0.25f);
}

垂直错切效果

ky就是k2，负值，向上切；正值，向下切

bitmap最右边的区域不是错切的效果，是由于bitmap的宽没有canvas的宽大，留下的空白区域

两个方向都错切：

matrix.setSkew(0.25f,0.25f);

两个方向错切

此时能够明显看出，错切的中心点为bitmap的左上角

5.3.2 setSkew(float kx, float ky, float px, float py) 指定错切中心

简单使用：

matrix.setSkew(0.1f,0.1f,bitmap.getWidth()/2,bitmap.getHeight()/2);

指定错切中心点

以bitmap的中心为错切中心点

这里目前并非很理解指定中心点后错切对坐标系的影响

6.矩阵中的元素与四种变换效果的对应关系

矩阵

• a和e 控制缩放变换
• b和d 控制错切变换
• c和f 控制平移变换
• a，b，d，e 共同控制旋转变换

变化过滤

第1行都是影响的X轴，第2行影响的Y轴

7.关于前乘和后乘

首先，矩阵的乘法不知足乘法的交换规律

在Matrix类中，set方法会重置矩阵中的全部值，而pre和post不会

7.1 简单对比

前乘的代码：

private void init() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
    matrix = new Matrix();
    matrix.setTranslate(100,100);
    matrix.preRotate(15);
}

前乘效果

先进行平移，前乘旋转15°

后乘，简单修改代码：

matrix.postRotate(15);

后乘效果

二者差异，看右下角的区域比较明显

7.2 尝试分析

前乘旋转源码

旋转后乘源码

前乘就是M * R(degrees)，后乘就是R(degrees) * M
前乘就对应线性代数矩阵运算的右乘
后乘就对应线性代数矩阵运算的左乘

在矩阵运算中：
M右乘A，就是A * M
M左乘A，就是M * A

简单记法：右乘从右边乘进来，左乘从左边乘进来

7.1中的矩阵：

矩阵分析

在7.1中共有3个矩阵，首先平移b，旋转a，像素c

在前乘或者后乘以前有一个setTranslate(100,100)设置的矩阵b，前乘后后乘也就是相对于b来讲

在7.1前乘，计算过程就是：
a右乘b，计算就是b * a，获得一个新的矩阵N，N * c

后乘的过程：
a左乘b，计算就是a * b，获得一个新的矩阵N，N * c

总结：
在pre或者post方法前进行设置了哪一个矩阵M，矩阵M与M以前全部的矩阵的运算获得的新矩阵N，N就看作当前矩阵，前乘或者后乘就是相对于这个当前矩阵N而言

7.3 补充 2016.09.30 09:09 <p>

根据总结，看下下面的两个小练习：

//方式1
matrix = new Matrix();
matrix.preRotate(30);
matrix.postTranslate(100f, 100f);

//方式2
matrix = new Matrix();
matrix.postTranslate(100f, 100f);
matrix.preRotate(30);

//方式3
matrix = new Matrix();
matrix.postRotate(30);
matrix.preTranslate(100f, 100f);

1. 方式1和方式2结果是否相同？ 相同
2. 方式1和方式3结果是否相同？ 不一样

有图，有真相

3种方式的差异

在看问题前，先了解这样一个矩阵的知识点，有助于理解问题：

有3个矩阵A，B，C，相乘，N = A * B * C
从左向右顺序计算，第1步，X = A * B，而后N = X * C
从右向左倒序计算，第1步，X = B * C，而后N = A * X

这两种计算方式是同样的。

网上有人说，图形处理时，矩阵的运算是从右向左计算的，这也就是为啥有pre能够理解为先进行计算的一说，但我的感受，从左开始和从右开始计算是同样的。但从右开始计算更容易理解吧

之因此说矩阵不知足乘法的交换规律，是说A * B ≠ B * A

N = A * B * C，从左开始计算和从右开始计算结果同样的前提就是，要按照矩阵排列时的顺序来进行计算

N = A * B，但N * C ≠ C * N

下面看问题

问题1：

• 方式1的矩阵的形式：

方式1矩阵

• 方式2的矩阵的形式：

方式2

new Matrix()或者mMatrix.reset()获得的就是一个原始矩阵

两个矩阵最终形式其实就是一个矩阵，差异能够经过括号的位置理解，括号内的就是先计算的。方式1是能够看做从右面开始计算，方式2能够看作从左面开始计算。但前面说了，计算的顺序并会不影响最终的结果

问题2：

方式3的矩阵形式与方式1，2不同：

方式3矩阵

方式3中与方式1，2的差异就是旋转和平移两个矩阵交换了位置，而矩阵不知足乘法的交换律，因此方式1和方式3，最终结果就不一样

8.其余的方法

Matrix中，方法主要4大类，占据了绝大部分，set，pre，post，map开头的方法

8.1 setPolyToPoly()

这个方法很是强大，经过改变参数，除了能够实现平移，旋转，缩放，错切，还能够实现透视

这个方法主要是利用肯定矩形4个顶点，根据4个顶点坐标的变化来对bitmap进行变换

setPolyToPoly方法

最终的效果主要由src和dst两个数组进行控制，两个数组控制4个顶点的坐标，srcIndex,dstIndex分别是src和dst的第一个值的角标，pointCount是4个顶点中要使用的个数，最大为4,0表示不进行操做变换

透视效果，简单使用：

private void init() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
    matrix = new Matrix();
    float bWidth = bitmap.getWidth();
    float bHeight = bitmap.getHeight();
    float[] src = {0, 0, 0, bHeight, bWidth, bHeight,bWidth, 0};
    float[] dst = {0 + 150,0, 0, bHeight, bWidth, bHeight, bWidth - 150, 0};
    matrix.setPolyToPoly(src, 0, dst, 0, 4);
}
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.YELLOW);
    canvas.drawBitmap(bitmap,matrix,null);
}

透视效果

float[] src和float[] dst中的值必定是成对的出现，由于一个点的坐标由(x,y)来肯定，两两一对控制对应的一个顶点的坐标，最多有4对有效，超过的无效，由于再方法setPolyToPoly()中，最后一个参数不能超过4

数组值和顶点坐标点的对应关系：

float[] dst = {f0, f1, f3, f3, f4, f5,f6, f7}

坐标和顶点的对应关系

为了方便看，将bitmap放在了画布比较靠中心的位置

dst能够看作是底板，最终要显示的效果；
src能够看作是要截取的bitmap的要显示的有效区域

控制不一样的点的效果：

• 1个点，平移
• 2个点，缩放或者旋转
• 3个点，错切
• 4个点，透视

8.2 setRectToRect()

setRectToRect(RectF src, RectF dst, ScaleToFit stf)

第一个参数src，截取资源Bitmap的显示区域
第二个参数dst，底板，显示的区域
第三个参数stf，模式

谷歌api 给的Demo:

ScaleToFit

FILL: 可能会变换矩形的长宽比，保证变换和目标矩阵长宽一致。
START:保持坐标变换前矩形的长宽比，并最大限度的填充变换后的矩形。至少有一边和目标矩形重叠。左上对齐。
CENTER: 保持坐标变换前矩形的长宽比，并最大限度的填充变换后的矩形。至少有一边和目标矩形重叠。
END:保持坐标变换前矩形的长宽比，并最大限度的填充变换后的矩形。至少有一边和目标矩形重叠。右下对齐。

图和文字说明从androidmatrix最全方法详解与进阶(完整篇)摘抄

简单使用：

private void init() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
    matrix = new Matrix();
    int screenWidth  = getResources().getDisplayMetrics().widthPixels;
    int screenHeight = getResources().getDisplayMetrics().heightPixels;
    float bWidth = bitmap.getWidth();
    float bHeight = bitmap.getHeight();
    RectF src = new RectF(0,0,bWidth/2,bHeight/2 );
    RectF dst = new RectF(0,0,screenWidth,screenHeight);
    matrix.setRectToRect(src,dst, Matrix.ScaleToFit.END);
}
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.YELLOW);
    canvas.drawBitmap(bitmap,matrix,null);
}

Matrix.ScaleToFit.END

结合上面的图，也比较容易理解

8.3 其余的一些方法

方法名	做用
reset()	将矩阵恢复为初始化矩阵
boolean invert(Matrix inverse)	反转当前矩阵
boolean isIdentity()	是否为初始化矩阵
boolean isAffine()	是否为仿射矩阵
boolean rectStaysRect()	判断该矩阵是否能够将一个矩形依然变换为一个矩形。当矩阵是单位矩阵，或者只进行平移，缩放，以及旋转90度的倍数的时候，返回true

仿射变换其实就是二维坐标到二维坐标的线性变换，保持二维图形的“平直性”（即变换后直线仍是直线不会打弯，圆弧仍是圆弧）和“平行性”（指保持二维图形间的相对位置关系不变，平行线仍是平行线，而直线上点的位置顺序不变），能够经过一系列的原子变换的复合来实现，原子变换就包括：平移、缩放、翻转、旋转和错切。这里除了透视能够改变z轴之外，其余的变换基本都是上述的原子变换，因此，只要最后一行是0,0,1则是仿射矩阵。

其余的方法之后用到了再学习补充

9. 最后

本篇主要就学习4种基本变换操做的方法

本人很菜，有错误请指出

感谢学习资料中的大神前辈们

共勉 : )

做者：英勇青铜5 连接：https://www.jianshu.com/p/11e062284491 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。