Android OpenGL ES預熱:Android Matrix 小整理

前言

在 Android 開發(fā)中屯烦,矩陣是一個功能強大并且應用廣泛的神器狈癞,但是就是看不懂,線性代數(shù)白學了嚷缭。

準備

谷歌官方文檔是個好東西!
安卓自定義View進階-Matrix原理
深入理解 Android 中的 Matrix

開整

The Matrix class holds a 3x3 matrix for transforming coordinates.
說明這是一個 3x3的矩陣黄娘。

詳細的說明如下圖:


Matrix.png

基本方法解析

我們根據(jù)安卓文檔上面的方法進項講解峭状。

(1) 構(gòu)造函數(shù)

1. public Matrix ()
Create an identity matrix 創(chuàng)建單位矩陣
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 數(shù)組
    * @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)

對于單個坐標來說着帽,縮放只要將其坐標值值乘以縮放值即可。
假設(shè)對某個點寬度縮放 k1 倍移层,高度縮放 k2 倍仍翰,該點坐標為 x0、y0观话,縮放后坐標為 x予借、y,那么縮放的公式如下:

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

我們現(xiàn)在知道了縮放對應矩陣中的兩個值的位置以及上面的公式频蛔,那現(xiàn)在在用矩陣來描述縮放操作:

\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]

等號左邊的矩陣就是計算后的縮放結(jié)果灵迫。

Matrix 中用于縮放操作的方法有如下兩個:

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

前面兩個參數(shù) sx、sy晦溪,分別是寬和高的縮放比例瀑粥。
第二個重載方法多了兩個參數(shù) px、py三圆,這兩個參數(shù)用來描述縮放的樞軸點幅慌,關(guān)于樞軸點的含義可以看下注釋:

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.

大概說樞軸點是指定轉(zhuǎn)換應保持不變的坐標狂打。
當我們不傳這兩個參數(shù)時,樞軸點默認為左上角的點,縮放都是向下和向右但汞,所以樞軸點可以大概的理解為縮放的錨點吼野,縮放從這個點開始向四周擴散巩那。
我們用矩陣來描述一下就能明白了悟狱。

  1. 調(diào)用2個參數(shù)縮放方法:
matrix.setScale(0.5f, 0.5f);

縮放 0.5 倍,調(diào)用該方法后矩陣變換為:

    [0.5, 0.0, 0.0, 
     0.0, 0.5, 0.0, 
     0.0, 0.0, 1.0]

得到效果如下:


縮放
  1. 調(diào)用4個參數(shù)縮放方法:
   matrix.setScale(0.5f, 0.5f, 100f, 200f);

縮放 0.5 倍磷籍,調(diào)用該方法后矩陣變換為:

    [0.5, 0.0, 50.0, 
     0.0, 0.5, 100.0, 
     0.0, 0.0, 1.0]

實際上我們設(shè)置了樞軸點后 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]

用于設(shè)置位移操作的只有一個方法:

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]

得到的圖像如下:

錯切

我們上面是設(shè)置的x,下面我們設(shè)置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比然,我們都設(shè)置:

 matrix.setSkew(1f, 1f);

得到的矩陣如下:

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

那么圖形會是什么樣子的呢丈氓??小伙伴可以試試。

7. 旋轉(zhuǎn)(Rotation)

我們分析圍繞坐標原點旋轉(zhuǎn):

假定有一個點P(x_0,y_0)万俗,相對坐標原點順時針旋轉(zhuǎn)\theta后的情形湾笛,同時假定P點離坐標原點的距離為r,如下圖:

旋轉(zhuǎn)

那么闰歪,
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]

得到的圖像如下:


旋轉(zhuǎn)
8. 串連接(Concat)

Matrix類還提供了直接矩陣計算方式。Matrix a=new Matrix()相當于創(chuàng)建一個單位矩陣库倘。

  • 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.
還是說旋轉(zhuǎn)杰扫,那就和setRotate一樣的現(xiàn)象。

上面我們驗證了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 中實際上提供了三種操作凡伊,分別是:設(shè)置(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);

設(shè)置(set)

如果我們不需要考慮復合變換的情況,一般可以直接使用 set 方法惠豺,因為 set 方法會重置之前的 Matrix 狀態(tài)银还,導致之前設(shè)置的變換失效。

前乘(pre)

前乘相當于矩陣右乘:
M^洁墙、 = M \times S

假設(shè)當前矩陣 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]

這里的前乘后乘的概念主要是由于矩陣不符合乘法交換律引起的捺弦,我們使用時一定要注意,除此之外,調(diào)用順序的不同對其結(jié)果也有影響列吼,所以我們在使用時需要先確定好矩陣的變換方式幽崩,過程之后,再決定如何使用這些方法寞钥。

總結(jié)

借用網(wǎng)上的一張圖慌申,來總結(jié):


總結(jié)

Demo地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市凑耻,隨后出現(xiàn)的幾起案子太示,更是在濱河造成了極大的恐慌,老刑警劉巖香浩,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件类缤,死亡現(xiàn)場離奇詭異,居然都是意外死亡邻吭,警方通過查閱死者的電腦和手機餐弱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來囱晴,“玉大人膏蚓,你說我怎么就攤上這事』矗” “怎么了驮瞧?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長枯芬。 經(jīng)常有香客問我论笔,道長,這世上最難降的妖魔是什么千所? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任狂魔,我火速辦了婚禮,結(jié)果婚禮上淫痰,老公的妹妹穿的比我還像新娘最楷。我一直安慰自己,他們只是感情好待错,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布籽孙。 她就那樣靜靜地躺著,像睡著了一般朗鸠。 火紅的嫁衣襯著肌膚如雪蚯撩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天烛占,我揣著相機與錄音胎挎,去河邊找鬼沟启。 笑死,一個胖子當著我的面吹牛犹菇,可吹牛的內(nèi)容都是我干的德迹。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼揭芍,長吁一口氣:“原來是場噩夢啊……” “哼胳搞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起称杨,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤肌毅,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后姑原,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悬而,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年锭汛,在試婚紗的時候發(fā)現(xiàn)自己被綠了笨奠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡唤殴,死狀恐怖般婆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情朵逝,我是刑警寧澤蔚袍,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站配名,受9級特大地震影響页响,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜段誊,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望栈拖。 院中可真熱鬧连舍,春花似錦、人聲如沸涩哟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽贴彼。三九已至潜腻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間器仗,已是汗流浹背融涣。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工童番, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人威鹿。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓剃斧,卻偏偏與公主長得像,于是被迫代替她去往敵國和親忽你。 傳聞我的和親對象是個殘疾皇子幼东,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容