Android OpenGL ES预热：Android Matr

作者: yzzCool | 来源:发表于2020-05-15 10:37 被阅读0次

前言

在 Android 开发中，矩阵是一个功能强大并且应用广泛的神器，但是就是看不懂，线性代数白学了。

准备

谷歌官方文档是个好东西！
安卓自定义View进阶-Matrix原理
 深入理解 Android 中的 Matrix

开整

The Matrix class holds a 3x3 matrix for transforming coordinates.
说明这是一个 3x3的矩阵。

详细的说明如下图：

Matrix.png

基本方法解析

我们根据安卓文档上面的方法进项讲解。

(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，那么缩放的公式如下：

$x = k_1 \times x_0 \\ y = k_2 \times y_0$

我们现在知道了缩放对应矩阵中的两个值的位置以及上面的公式，那现在在用矩阵来描述缩放操作：

$\left[ \begin{matrix} x \\ y \\ z \end{matrix} \right] = \left[ \begin{matrix} k_1 & 0 & 0 \\ 0 & k_2 & 0 \\ 0 & 0 & 1 \end{matrix} \right] \left[ \begin{matrix} x_0 \\ y_0 \\ 1 \end{matrix} \right]$

等号左边的矩阵就是计算后的缩放结果。

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）平移一定的距离，我们直接将坐标加上平移的距离即可得到平移后的坐标：

$x = x_0 + \triangle x \\ y = y_0 + \triangle y$

用矩阵表示：

$\left[ \begin{matrix} x \\ y \\ z \end{matrix} \right] = \left[ \begin{matrix} 1 & 0 & \triangle x \\ 0 & 1 & \triangle y \\ 0 & 0 & 1 \end{matrix} \right] \left[ \begin{matrix} x_0 \\ y_0 \\ 1 \end{matrix} \right]$

用于设置位移操作的只有一个方法：

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）

错切不好讲，我们先看一下公式，如下：

$x = x_0 + k_1 y_0 \\ y = y_0 + k_2 x_0$

用矩阵表示：

$\left[ \begin{matrix} x \\ y \\ z \end{matrix} \right] = \left[ \begin{matrix} 1 & k_1 & 0 \\ k_2 & 1 & 0 \\ 0 & 0 & 1 \end{matrix} \right] \left[ \begin{matrix} x_0 \\ y_0 \\ 1 \end{matrix} \right]$

错切操作的方法：

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(x_0,y_0)$ ，相对坐标原点顺时针旋转 $\theta$ 后的情形，同时假定P点离坐标原点的距离为r，如下图：

旋转

那么，
$x_0 =r\cos\alpha \\ y_0 = r\sin\alpha \\ x = r\cos(\alpha + \theta) = r\cos\alpha\cos\theta - r\sin\alpha\sin\theta = x_0\cos\theta - y_0\sin\theta \\ y = r\sin(\alpha + \theta) = r\sin\alpha\cos\theta + r\cos\alpha\sin\theta = y_0\cos\theta + x_0\sin\theta \\$

如果用矩阵，就可以表示为：
用矩阵表示：

$\left[ \begin{matrix} x \\ y \\ z \end{matrix} \right] = \left[ \begin{matrix} \cos\theta & -\sin\theta & 0 \\ \sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{matrix} \right] \left[ \begin{matrix} x_0 \\ y_0 \\ 1 \end{matrix} \right]$

我们用代码验证一下：

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

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^、 = M \times S$

假设当前矩阵 M 为：

    [1.3, 0.0, 0.0, 
     0.0, 1.3, 0.0, 
     0.0, 0.0, 1.0]

我们使用 pre 方法做一个平移操作：

matrix.preTranslate(100, 100);

变换过程如下：
$\left[ \begin{matrix} 1.3 & 0 & 130 \\ 0 & 1.3 & 130 \\ 0 & 0 & 1 \end{matrix} \right] = \left[ \begin{matrix} 1.3 & 0 & 0 \\ 0 & 1.3 & 0 \\ 0 & 0 & 1 \end{matrix} \right] \left[ \begin{matrix} 1 & 0 & 100 \\ 0 & 1 & 100 \\ 0 & 0 & 1 \end{matrix} \right]$

后乘（post）

后乘相当于矩阵左乘：
$M^、 = S \times M$

我们用上面的矩阵 M 举个例子，同样对其做一个平移操作，但是使用 post 方法：

matrix.postTranslate(100, 100);

变换过程如下：

$\left[ \begin{matrix} 1.3 & 0 & 100 \\ 0 & 1.3 & 100 \\ 0 & 0 & 1 \end{matrix} \right] = \left[ \begin{matrix} 1 & 0 & 100 \\ 0 & 1 & 100 \\ 0 & 0 & 1 \end{matrix} \right] \left[ \begin{matrix} 1.3 & 0 & 0 \\ 0 & 1.3 & 0 \\ 0 & 0 & 1 \end{matrix} \right]$

这里的前乘后乘的概念主要是由于矩阵不符合乘法交换律引起的，我们使用时一定要注意，除此之外，调用顺序的不同对其结果也有影响，所以我们在使用时需要先确定好矩阵的变换方式，过程之后，再决定如何使用这些方法。

总结

借用网上的一张图，来总结：

总结

Demo地址

Android OpenGL ES预热：Android Matr

前言

准备

开整

基本方法解析

(1) 构造函数

(2) 矩阵属性

(3) reset

(4) 缩放（Scale）

5. 位移（Translate）

6. 错切（Skew）

7. 旋转（Rotation）

8. 串连接（Concat）

9. 正余弦的使用

Matrix 复合变换

设置（set）

前乘（pre）

后乘（post）

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读