利用矩阵来变换图片

 

          在上一个主题中，学习了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，一切都好了，运行程序吧。下面是两张效果图：

                              

      刚开始是左边的图片，然后设定好矩阵的值，点击改变是右边的图片，点击恢复后又变为左边的图片。

      经过上面的实际演练，不知道你有没有掌握矩阵变换的知识呢？你可以试着采用第二种矩阵设置的方式，试一试，这样子能更好的检验你的学习效果。我就不尝试了。在下一篇文章中，将会学习利用画笔风格来实现图片效果。赶快和我一起学习吧！另外，如果继续学习，请妥善保存好本篇代码，因为后面的文章是在这个代码上进行再书写的。