Android变形(Transform) 之 Matrix

引言

最近在研究Android的变形，Android的2D变形（包括缩放，扭曲，平移，旋转等）可以通过Matrix来实现，3D变形可以通过Camera来实现。接下来就将我这俩天研究的东西和大家分享下，先来看看Matrix的用法。

 

效果图

变形以后

 

 

Matrix矩阵

坐标变换矩阵，即一个3*3的矩阵，用来对图形进行坐标变换。

图1.1  A为坐标矩阵，C为原始矩阵，R是A和C矩阵相乘记过，那么可以知道：(矩阵知识，大学没学好的伤不起啊)

x’ = a*x + b*y + c

y’ = d*x + b*y + f

最后一列很少有资料提到，不过初始值g=h=0，大家可以去改变值试试，变化为3D效果，但是值没看出规律，那么i为缩放比例，初始值为1。

初始化坐标矩阵为{1,0,0,   0,1,0,   0,0,1}

 

上面讲到的是基本的算法，那么具体这个矩阵x行x列的值代表上面呢，不防简单的来看看

如果A={1,0,100,  0,1,-100,  0,0,2}，那么可以算出来

x’ = x + 100;

y’ = y - 100;

也即在原始的基础上右移100，上移100，单位为像素。第三列第三行为2，表示为以前比例的1/2，记住这块容易弄错。

下面给出具体坐标对应变形的属性

|scaleX, skewX, translateX| 

|skewY, scaleY, translateY|

|0       ,0        , scale       |

 

实践

通过代码来看看具体的用法

 1 public class MatrixTransformView extends View {
 2 
 3     private Matrix mMatrix;
 4     private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
 5     private Bitmap mBitmap;
 6     
 7     public MatrixTransformView(Context context) {
 8         super(context);
 9     }
10     
11     public MatrixTransformView(Context context, AttributeSet attrs) {
12         super(context, attrs);
13     }
14     
15     public void setDrawable(int resId) {
16         mBitmap = BitmapFactory.decodeResource(getContext().getResources(), resId);
17     }
18     
19     /*
20      * 设置矩阵，并重绘
21      */
22     public void setMatrixValues(float[] array) {
23         if (mMatrix == null) {
24             mMatrix = new Matrix();
25         }
26         mMatrix.reset();
27         mMatrix.setValues(array);
28         invalidate();
29     }
30     
31     public void resetMatrix() {
32         if (mMatrix != null) {
33             mMatrix.reset();
34         }
35         invalidate();
36     }
37     
38     @Override
39     protected void onDraw(Canvas canvas) {
40         if (mMatrix != null) {
41             Paint paint = mPaint;
42             canvas.drawBitmap(mBitmap, mMatrix, paint);
43         }
44         
45         super.onDraw(canvas);
46     }
47 }

通过Matrix的setValues方法，将3*3的矩阵坐标值进行设置即可。

强调的一点是，在调用setMatrixValues的时候需要调用invalidate方法，让View进行调用onDraw进行重绘。

矩阵的基本用法就是这些，往往在开发过程中，不直接通过矩阵坐标去实现变形，因为如果要实现选择，那么就比较复杂了，涉及到三角函数，对于数据早已经忘差不多的人，很是痛苦，当然如果非要用的话，算起来也不难。

 

那么为了避免直接使用矩阵坐标来操作变形，Matrix类提供方法来进行变:

set方式：setScale, setSkew, setTranslate, setRotate

post方式：postScale, postSkew, postTranslate, postRotate

pre方式：preScale, preSkew, preTranslate, preRotate

set方式为直接设置，每一次调用set方法都会先重置矩阵。post可以理解成设置多次有效，效果是累加的。pre这里暂且理解成和post方式完全一样，后面3D的时候再纠结。

 

看代码：

 1 public class MatrixTransformView extends View {
 2 
 3     private Matrix mMatrix;
 4     private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
 5     private Bitmap mBitmap;
 6     
 7     public MatrixTransformView(Context context) {
 8         super(context);
 9     }
10     
11     public MatrixTransformView(Context context, AttributeSet attrs) {
12         super(context, attrs);
13     }
14     
15     public void setDrawable(int resId) {
16         mBitmap = BitmapFactory.decodeResource(getContext().getResources(), resId);
17     }
18     
19     /*
20      * 设置矩阵，并重绘
21      */
22     public void setMatrixValues(float[] array) {
23         if (mMatrix == null) {
24             mMatrix = new Matrix();
25         }
26         mMatrix.reset();
27         mMatrix.setValues(array);
28         invalidate();
29     }
30     
31     public void postMatrixScale(float scaleX, float scaleY, float centerX, float centerY) {
32         if (mMatrix == null) {
33             mMatrix = new Matrix();
34         }
35         mMatrix.preScale(scaleX, scaleY, centerX, centerY);
36         invalidate();
37     }
38     
39     public void postMatrixSkew(float skewX, float skewY, float centerX, float centerY) {
40         if (mMatrix == null) {
41             mMatrix = new Matrix();
42         }
43         mMatrix.postSkew(skewX, skewY, centerX, centerY);
44         invalidate();
45     }
46     
47     public void postMatrixTranslate(float translateX, float translateY) {
48         if (mMatrix == null) {
49             mMatrix = new Matrix();
50         }
51         mMatrix.postTranslate(translateX, translateY);
52         invalidate();
53     }
54     
55     public void postMatrixRotate(float degree, float centerX, float centerY) {
56         if (mMatrix == null) {
57             mMatrix = new Matrix();
58         }
59         mMatrix.postRotate(degree, centerX, centerY);
60         invalidate();
61     }
62     
63     public void resetMatrix() {
64         if (mMatrix != null) {
65             mMatrix.reset();
66         }
67         invalidate();
68     }
69     
70     @Override
71     protected void onDraw(Canvas canvas) {
72         if (mMatrix != null) {
73             Paint paint = mPaint;
74             canvas.drawBitmap(mBitmap, mMatrix, paint);
75         }
76         
77         super.onDraw(canvas);
78     }
79 }

Matrix的基本用法就这么多。

 

扩展

变形是需要canvas来进行绘制的，canvas的绘制需要bitmap，所以这块利用一个继承自View的控件，通过setDrawable方式设置bitmap，那么选择目标必须是个bitmap，在文章的demo中，通过参数为int型resource的setDrawable方法进行bitmap获取，如果想对别的控件进行变形，例如ViewGroup，可以通过如下方式：

 1         Matrix m = new Matrix();
 2         m.setValues(new float[] {
 3                 1, 0, 0,
 4                 0, 1, 0,
 5                 0, 0, 1 
 6                 });
 7         Bitmap bp = Bitmap.createBitmap(viewGroup.getWidth(), viewGroup.getHeight(), Bitmap.Config.RGB_565);
 8         Canvas can = new Canvas(bp);
 9         viewGroup.draw(can);
10         bp = Bitmap.createBitmap(bp, 0, 0, bp.getWidth(), bp.getHeight(), m, true);
11         img.setImageBitmap(bp);

通过将ViewGroup转换成Bitmap，然后自定义一个Image来变形，隐藏ViewGroup来达到效果。

 

疑问

1.如果谁知道post，pre的区别，请告诉我下，看看我的理解是否正确。

2.能否实现ViewGroup直接变形，而非我上面讲的那种。