android中的matrix的简单应用--translate(平移)，rotate(旋转)，scale(缩放)和skew(倾斜)

大家好！今天学习了matrix的简单用法，希望在这里能和大家一起学习和了解一下matrix的相关知识。

　  在android中， Matrix的操作，总共分为translate(平移)，rotate(旋转)，scale(缩放)和skew(倾斜)四种，每一种变换在

Android的API里都提供了set, post和pre三种操作方式,除了translate，其他三种操作都可以指定中心点。

其中set是直接设置Matrix的值，每次set一次，整个Matrix的数组都会变掉。

其次post是后乘，当前的矩阵乘以参数给出的矩阵。可以连续多次使用post，来完成所需的整个变换。例如，要将一个图片旋转30度，然后平移到(100,100)的地方，可以这样做:

Matrix m = new Matrix();   
m.postRotate(30);   
m.postTranslate(100, 100);    
Matrix m = new Matrix();    
m.postRotate(30);    
m.postTranslate(100, 100); 

最后 pre是前乘，参数给出的矩阵乘以当前的矩阵。所以操作是在当前矩阵的最前面发生的。例如上面的例子，如果用pre的话，可以这样做:

Matrix m = new Matrix();   
m.setTranslate(100, 100);    
m.preRotate(30);

旋转、缩放和倾斜都可以围绕一个中心点来进行，如果不指定，默认情况下，是围绕(0,0)点来进行。

下面我通过我今天做的小例子来进一步理解一下matrix的一些简单操作：

先看一下运行界面：

 

1.当我们点击缩放按钮的时候，它会按照EditText中输入的比例对imageView进行缩放，主要是通过matrix的postScale方法实现的。效果图如下：

 按0.25的比例缩小

按1.75的比例放大

2.当点击旋转按钮的时候，会按照上面标明的角度值进行旋转，通过matrix的postRotate实现的，数值为正的时候是顺时针旋转，为负值时是逆时针旋转。效果图如下：

顺时针旋转30度

逆时针旋转30度

3.当点击移动按钮的时候，图片进行移动，通过matrix的postTranslate方法实现的，效果如下：

上面的前一个10标明平移的横坐标，第二个10标明的是纵坐标

当点击还原的时候，图片恢复到最初的状态，主要是通过matrix的reset()方法实现的。

还原后的效果

上述的代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

package lm.matrix;   import android.app.Activity; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.os.Bundle; import android.view.View; import android.widget.EditText; import android.widget.ImageView;   public class MyMatrix extends Activity{      private EditText scaleEt;      private EditText rotateEt;      private EditText translateEt1;      private EditText translateEt2;      private ImageView imageView;      private Matrix matrix;      private Bitmap bitMap;      @Override      protected void onCreate(Bundle savedInstanceState) {                    super .onCreate(savedInstanceState);          setContentView(R.layout.matrix);                    scaleEt = (EditText)findViewById(R.id.et_scale);          rotateEt = (EditText)findViewById(R.id.et_rotate);          translateEt1 = (EditText)findViewById(R.id.et_translateX);          translateEt2 = (EditText)findViewById(R.id.et_translateY);          imageView = (ImageView)findViewById(R.id.iv_matrix);          bitMap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);          imageView.setImageBitmap(bitMap);          matrix = new Matrix();      }            public void scaleBitmap(View view){          matrix.postScale(getValues(scaleEt), getValues(scaleEt));          imageView.setImageMatrix(matrix);      }            public void rotateBitmap(View view){          matrix.postRotate(getValues(rotateEt));          imageView.setImageMatrix(matrix);      }            public void translateBitmap(View view){          matrix.postTranslate(getValues(translateEt1), getValues(translateEt2));          imageView.setImageMatrix(matrix);      }            public void clearMatrix(View view){          matrix.reset();          imageView.setImageMatrix(matrix);      }            private float getValues(EditText et){          return Float.parseFloat(et.getText().toString());      }        }

xml文件代码如下：

?

<?xml version= "1.0" encoding= "utf-8" ?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"      android:orientation= "vertical"      android:layout_width= "fill_parent"      android:layout_height= "fill_parent"      >      <LinearLayout           android:layout_marginTop= "10dip"          android:layout_width= "fill_parent"          android:layout_height= "50dip"          android:orientation= "horizontal" >          <EditText android:id= "@+id/et_scale"              android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:hint= "缩放比例"              android:text= "0.25" />          <EditText android:id= "@+id/et_rotate"              android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "30"              android:hint= "旋转角度"              android:onClick= "rotateBitmap" />          <EditText android:id= "@+id/et_translateX"              android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "10"              android:hint= "X偏移" />          <EditText android:id= "@+id/et_translateY"              android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "10"              android:hint= "y偏移" />      </LinearLayout>            <LinearLayout android:layout_marginTop= "10dip"          android:layout_width= "fill_parent"          android:layout_height= "50dip"          android:orientation= "horizontal" >          <Button android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "缩放"              android:onClick= "scaleBitmap" />          <Button android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "旋转"              android:onClick= "rotateBitmap" />          <Button android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "移动"              android:onClick= "translateBitmap" />          <Button android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "还原"              android:onClick= "clearMatrix" />      </LinearLayout>            <ImageView android:layout_weight= "1.0"          android:id= "@+id/iv_matrix"          android:layout_width= "fill_parent"          android:layout_height= "fill_parent"          android:scaleType= "matrix" />                 <LinearLayout android:layout_marginTop= "10dip"          android:layout_width= "fill_parent"          android:layout_height= "50dip"          android:orientation= "horizontal" >          <Button android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "深入测试1"              android:onClick= "test1" />          <Button android:layout_weight= "1.0"              android:layout_width= "fill_parent"              android:layout_height= "wrap_content"              android:text= "深入测试2"              android:onClick= "test2" />      </LinearLayout> </LinearLayout>

当然还可以对图片进行拉伸，是通过matrix的postSkew方法实现的，看看我们先对图片进行平移再对其实现拉伸效果图：

它的实现代码如下：

?

package lm.matrix;

 

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Matrix;

import android.graphics.drawable.BitmapDrawable;

import android.os.Bundle;

import android.view.View;

 

public class MyMatrixThree extends Activity{

 

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super .onCreate(savedInstanceState);

         setContentView( new MyView( this ));

     }

     

     class MyView extends View{

         private Bitmap bitMap;

         private Matrix matrix;

         public MyView(Context context) {

             super (context);

             matrix = new Matrix();

             bitMap = ((BitmapDrawable) getResources().getDrawable(R.drawable.icon)).getBitmap();

             matrix.setScale(100f/bitMap.getWidth(), 100f/bitMap.getHeight());

             matrix.postTranslate( 150 , 150 );

             matrix.postSkew( 0 .2f, 0 .2f, 150 , 150 ); //拉伸

             

         }

         @Override

         protected void onDraw(Canvas canvas) {

             super .onDraw(canvas);

             canvas.drawBitmap(bitMap, matrix, null );

         }

     }

}