閱讀839 返回首頁    go 阿裏雲 go 技術社區[雲棲]

android中的matrix的簡單應用

https://www.cnblogs.com/limingblogs/archive/2011/10/04/2199186.html


 在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="https://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);
        }
    }
} 
 

最後更新：2017-04-02 17:51:24

  上一篇：go 完全仿QQ好友列表，自定義ExpandableListView！
  下一篇：go ViewPager實現左右兩個屏幕的切換