利用矩陣來變換圖片

 

          在上一個主題中，學習了android圖像的顏色處理。沒讀過的朋友可以點擊一下鏈接學習：

http://i.cnblogs.com/EditPosts.aspx?catid=744685

      那么在從這一篇文章開始，繼續學習android的圖像處理知識之圖像的變換。比如說圖像的縮放，拉伸，平移，旋轉，以及高級點的圖像的漸變和最有用的像素點變換方法。在這里進行一一的學習。這些知識也是我在學習后，總結在這里的，畢竟知識是積累起來的，每天積累一點學習一點，就會進步的很快。

      好了，廢話不多說。在這篇文章中，將學習最基本的圖像變換知識，即圖像的縮放，拉伸等。而其中的原理就是利用矩陣來實現這些效果。我們還是按照老規矩，先學習一下基礎的知識，然后再進行實戰的代碼編寫。

 

一、必須要知道的基礎知識

      下面有一張圖片，完美的解釋了矩陣變換的知識點。如下：

      如上圖所示，矩陣A就是我們需要設置的矩陣，而C代表着圖像上每一個像素點的位置（X為橫坐標，Y為縱坐標），R就是A*C得來的新的坐標位置。這樣子通過這樣子的矩陣運算，我們就把一張圖片的每一個像素點的坐標都做了改變，因此就會呈現出不同的效果。而這就是矩陣變換實現縮放，拉伸等效果的基本原理。我們還需要知道的是，矩陣A的某些元素是會控制一些特殊的效果的，下圖就是一個很好的總結：

     那么怎么根據矩陣畫出效果呢？對應於android中的API，其實就是利用了Canvas的一個方法，如下：

//畫出根據矩陣的變換后的圖像
canvas.drawBitmap(bmp, matrix, null);

     其中bmp對應於一個Bitmap圖片，而matrix是一個Matrix對象。那么下面的問題就是我們要怎么來設置這個矩陣了，也就是A。設定A有兩種方式。

     第一種，直接賦值

     很容易知道矩陣A其實是3*3的矩陣，有9個數值。因此，我們只需要給Matrix的setValues方法傳入一個長度為9的數值數組即可。

    第二種，利用縮放，旋轉等封裝好的api

    如果你覺得第一種方式太麻煩，不利於控制，沒關系。對於常見的縮放，旋轉等效果，android已經給你封裝好了API，只要你調用相關方法，就可以自動設置好矩陣A。方法很多，舉出一些如下：

Matrix matrix=new Matrix();

matrix.setTranslate(100, 50);//水平方向平移量為100，垂直方向平移量為50

matrix.setRotate(30, 20, 30);//旋轉30度，其中旋轉圍繞點（20,30）進行，默認為（0，0）

matrix.setScale(1, 2);//縮放，水平方向放大1倍，垂直方向放大2倍

matrix.setScale(1, 2,20,30);//依然是縮放，但是以點（20,30）為基准進行縮放

matrix.setSkew(5,10);//將圖片水平方向傾斜3，垂直方向傾斜10

matrix.setSkew(5,10,24,24);//同樣的道理，為傾斜找個基准點（24,24）

canvas.drawBitmap(bitmap,matrix, paint);

      好了，基礎的知識你差不多都知道了。下面我們趕緊編寫一些實際的代碼來試試吧。

二、實戰

      首先新建android項目“圖形變換”。編寫activity_main.xml代碼，如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:gravity="center"
        android:background="#cc00ff"
        android:text="圖像圖形變換" />
    <Button 
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="btnMatrix"
        android:textSize="25sp"
        android:text="矩陣變換"/>
    <Button 
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="btnXFermode"
        android:textSize="25sp"
        android:text="畫筆風格"/>
     <Button 
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="btnShader"
        android:textSize="25sp"
        android:text="圖片渲染實驗"/>
     <Button 
        android:id="@+id/btn4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="btnLShader"
        android:textSize="25sp"
        android:text="線性渲染實驗"/>
      <Button 
        android:id="@+id/btn5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="btnMesh"
        android:textSize="25sp"
        android:text="像素塊實驗"/>
     

</LinearLayout>

      怎么那么多按鈕啊。嘿嘿，這說明我們還有好多知識要學習要實驗呢，下面的一系列文章會一一實現這些按鈕功能的。不用着急，我們這篇文章先來實現第一個按鈕“矩陣變換”的效果，就是我們幾天所學的內容。

     然后需要一個自定義的view來畫出原來的圖片和經過矩陣變換后的圖片，這樣有比較才有感覺。新建類MyMatrixView繼承自View，代碼如下：

package com.fuly.image;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.View;

public class MyMatrixView extends View{

    private Bitmap bmp;
    private Matrix matrix;//顏色矩陣
    
    public MyMatrixView(Context context) {
        super(context);
        initView();
    }
    public MyMatrixView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public MyMatrixView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    
    private void initView(){//初始化方法
        bmp = BitmapFactory.decodeResource(getResources(), R.drawable.hudie2);
        setMatrix(new Matrix());//剛開始給個空矩陣即可
    }

    /**
     * 該方法用來設置顏色矩陣
     * @param matrix  顏色矩陣
     */
    public void setMatrix(Matrix matrix){
        this.matrix = matrix;
    }
    

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫出原來的圖像
        canvas.drawBitmap(bmp, 0, 0, null);
        //畫出根據矩陣的變換后的圖像
        canvas.drawBitmap(bmp, matrix, null);
    }

}

      在代碼中，我們首先將兩張相同的圖片畫在了同一個地方。這樣子，當其中的一張圖片旋轉或者拉伸，就很好的得到對比效果了。所用的圖片資源，讀者可自行替換為自己的一張小圖片。下面就是新建imagematrix.xml文件，將這個自定義的view放進去。代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center">

   <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="2">
       <com.fuly.image.MyMatrixView
           android:id="@+id/myview"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>
   </LinearLayout>
   <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="3">
       <GridLayout 
           android:id="@+id/mGrid"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:columnCount="3"
           android:rowCount="3"></GridLayout>
   </LinearLayout>
   <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       >
       <Button 
           android:id="@+id/btnChange"
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:onClick="btnChange"
           android:text="改變"/>
        <Button 
           android:id="@+id/btnReset"
           android:layout_width="0dp"
           android:layout_weight="1"
           android:onClick="btnReset"
           android:layout_height="wrap_content"
           android:text="恢復"/>
   </LinearLayout>

</LinearLayout>

      在這里，我們仍舊准備了兩個按鈕，用來改變和還原，而GridLayout就是用來設置矩陣A的。好了，下面就開始新建MatrixActivity，用於將這個布局顯示出來。注意不要忘記給這個活動注冊哈。代碼很簡單，不用多解釋的，注釋也很詳細。如下：

package com.fuly.image;

import android.app.Activity;
import android.graphics.Matrix;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.GridLayout;

public class MatrixActivity extends Activity{
    
    private MyMatrixView mv;
    private GridLayout mGrid;
    private int mEtWidth;
    private int mEtHeight;
    private Matrix matrix = new Matrix();
    private float[] mMtatrix = new float[9];
    
    private EditText[] Ets = new EditText[9];
    
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.imagematrix);
        
        mGrid = (GridLayout) findViewById(R.id.mGrid);
        mv = (MyMatrixView) findViewById(R.id.myview);
        //這個方法在mGrid被畫出來后調用
        mGrid.post(new Runnable(){

            public void run() {
                mEtWidth = mGrid.getWidth()/3;
                mEtHeight = mGrid.getHeight()/3;
                initGrid();
                initMatrix();
            }
            
        });
        
    }
    /*
     * 初始化GridLayout
     */
    private void initGrid(){
        for(int i=0;i<9;i++){
            EditText et = new EditText(this);
            Ets[i] = et;
            mGrid.addView(et,mEtWidth,mEtHeight);
        }
    }
    /*
     * 該法初始化矩陣
     */
    private void initMatrix(){
        for(int i=0;i<9;i++){
            if(i%4 == 0){
            Ets[i].setText(String.valueOf(1));
            }else{
                Ets[i].setText(String.valueOf(0));
            }
        }
    }
    /*
     * 該方法獲取矩陣
     */
    private void getMatrix(){
        for(int i=0;i<9;i++){
            mMtatrix[i]= Float.valueOf(Ets[i].getText().toString());
        }
        matrix.setValues(mMtatrix);
    }
    //下面是兩個按鈕事件
    public void btnChange(View v){
        getMatrix();
        mv.setMatrix(matrix);
        mv.invalidate();
    }

    public void btnReset(View v){
        initMatrix();
        getMatrix();
        mv.setMatrix(matrix);
        mv.invalidate();
    }
}

      東西都准備齊全了，下面就在MainActivity里面添加按鈕事件，跳轉到我們這個活動中來吧。如下：

package com.fuly.image;

import android.os.Bundle;
import android.view.View;
import android.app.Activity;
import android.content.Intent;


public class MainActivity extends Activity {

   
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
     
    //下面是按鈕事件
    public void btnMatrix(View v){
        Intent intent = new Intent(this,MatrixActivity.class);
        startActivity(intent);
    }
   
}

      OK，一切都好了，運行程序吧。下面是兩張效果圖：

                              

      剛開始是左邊的圖片，然后設定好矩陣的值，點擊改變是右邊的圖片，點擊恢復后又變為左邊的圖片。

      經過上面的實際演練，不知道你有沒有掌握矩陣變換的知識呢？你可以試着采用第二種矩陣設置的方式，試一試，這樣子能更好的檢驗你的學習效果。我就不嘗試了。在下一篇文章中，將會學習利用畫筆風格來實現圖片效果。趕快和我一起學習吧！另外，如果繼續學習，請妥善保存好本篇代碼，因為后面的文章是在這個代碼上進行再書寫的。