Android OpenGL ES预热:Android Matrix 小整理

前言

在 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.

大概说枢轴点是指定转换应保持不变的坐标。
当我们不传这两个参数时,枢轴点默认为左上角的点,缩放都是向下和向右,所以枢轴点可以大概的理解为缩放的锚点,缩放从这个点开始向四周扩散。
我们用矩阵来描述一下就能明白了。

  1. 调用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]

得到效果如下:


缩放
  1. 调用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地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容