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直接变形,而非我上面讲的那种。
 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM