I. Matrix structure
In Android development, Matrix is a very powerful and interesting tool. In a previous article, the principle of ColorMatrix was analyzed in detail and some simple color filtering functions were realized with it. This time, we will explore the Matrix, which is also powerful and has interesting functions of changing image graphics. So let’s look at the Matrix structure.
We can see that Matrix is a 3 by 3 Matrix.
- MSCALE_X, MSCALE_Y, and MPERSP_2 represent the scaling of X, Y, and W (perspective) respectively
- MSKEW_X and MSKEW_Y indicate incorrect cuts of X and Y respectively
- MTRANS_X and MTRANS_Y represent the translation of X and Y respectively
- MPERSP_0 and MPERSP_1 represent perspectives in the X and Y directions respectively
Use the sample
In fact, many places of Android use the Matrix method, such as picture, Canvas, animation, etc. Here, we take picture as an example. Just as in Canvas and ValueAnimator chapter, we draw a coordinate system first and then draw a rectangle in onDraw function.
// Canvas. Translate (mWidth/2,mHeight/2); mPaint.setStrokeWidth(1); DrawLine (-mwidth /2*0.8f,0,mWidth/2*0.8f,0,mPaint); DrawLine (0, -mheight /2*0.8f,0,mHeight/2*0.8f,mPaint); mPaint.setStrokeWidth(3); DrawLines (new float[]{mWidth/2*0.8f,0,mWidth/2*0.8f*0.95f, -mwidth /2*0.8f*0.05f, MWidth / 2 * 0.8 f, 0, mWidth / 2 * 0.8 * 0.95 f f, mWidth / 2 * 0.8 * 0.05 f f}, mPaint); DrawLines (new float[]{0,mHeight/2*0.8f,mWidth/2*0.8f*0.05f,mHeight/2* 0.8f-mwidth /2*0.8f*0.05f,mHeight/2*0.8f *0.05f, 0, mHeight / 2 * 0.8 f, mWidth / 2 * 0.8 * 0.05 f, f mHeight / 2 * 0.8 f - mWidth / 2 * 0.8 * 0.05 f, f}, mPaint); // create Matrix mMatrix = new Matrix(); DrawBitmap (mBitmap,mMatrix,null); drawBitmap(mBitmap,mMatrix,null);Copy the code
2. Matrix principle
1. Scale transformation
Scale the point in the X and y directions
Expressed as a matrix:
The effect is as follows:
Use the sample
Now we use the setScale method that comes with Matrix:
/** * test Matrix operation */ mmatrix.setScale (0.5f,0.5f); Log.d("TAG",mMatrix.toString()); / / Log/TAG: D Matrix {[0.5, 0.0, 0.0] [0.0, 0.5, 0.0] [0.0, 0.0, 1.0]}Copy the code
2. Tangent transformation
The effect of the tangent transformation is to leave the x-coordinate (or y-coordinate) of all points unchanged, while the y-coordinate (or x-coordinate) of phi is shifted proportionally.
Horizontal shear
The y stays the same, but the x coordinate is shifted proportionally. The calculation results of x and y are as follows:
Expressed as a matrix:
The effect is as follows:
Vertical shear
I keep the x constant, but I shift the y coordinate proportionally. The calculation results of x and y are as follows:
Expressed as a matrix:
The effect is as follows:
Of course, you can do both horizontal and vertical miscuts.
Use the sample
Now we use the setSkew method that comes with Matrix:
/** * test Matrix operation */ mmatrix.setskew (0f,0.5f); Log.d("TAG",mMatrix.toString()); / / Log/TAG: D Matrix {[1.0, 0.0, 0.0] [0.5, 1.0, 0.0] [0.0, 0.0, 1.0]}Copy the code
3, translation transformation
Let’s say I have some coordinates
Expressed as a matrix:
The effect is as follows:
Use the sample
Now we use the setTranslate method that comes with Matrix:
/ / mmatrix.setTranslate (-200,-200); / / mmatrix.setTranslate (-200,-200); Log.d("TAG",mMatrix.toString()); / / Log/TAG: D Matrix {[1.0, 0.0, 200.0] [0.0, 1.0, 200.0] [0.0, 0.0, 1.0]}Copy the code
4. Rotation transformation
So let’s say I have a point that is zero
Expressed by the matrix:
The effect is as follows:
Use the sample
Now we use the setRotate method that comes with Matrix:
/** * test Matrix operation */ mmatrix.setrotate (180); Log.d("TAG",mMatrix.toString()); / / Log/TAG: D Matrix {[1.0, 0.0, 0.0] [0.0, 1.0, 0.0] [0.0, 0.0, 1.0]}Copy the code
5. Perspective transformation
The last three arguments MPERSP_0, MPERSP_1, and MPERSP_2 were not mentioned in the previous transformation. Here we will talk a little about the perspective represented by these three arguments. Generally, a point in the image will be represented in the following way (x, y, w), while the two-dimensional matrix calculation in Android is based on the homogeneous coordinate, which requires the value of W to be 1, so the representation method of this point will be changed to (x/w, y/w, 1). The effect of perspective transformation is actually similar to that of the projector. Let’s look at the effect of coordinates (15,21,3) when w=3:
Now look at the effect of the calculated homogeneous coordinate system coordinates (5,7,1) :
According to this rule, when we modify the MPERSP_2 parameter in the process of use, the image will be similar to the zoom effect, which is actually the perspective transformation effect.
Use the sample
Now we use the setValues method that comes with Matrix:
MMatrix. SetValues (new float[]{1, 0, 0, 0, 1, 0, 0, 0, 1.5f}); Log.d("TAG",mMatrix.toString()); / / Log/TAG: D Matrix {[1.0, 0.0, 0.0] [0.0, 1.0, 0.0] [0.0, 0.0, 1.5]}Copy the code
Matrix forward and backward multiplication
The situation of Matrix forward multiplication and backward multiplication is basically the same as that described in the chapter of ColorMatrix multiplication in my previous article detailed explanation of ColorMatrix.
Before take
The forward times the current matrix times the input matrix
The following is an example:
mMatrix.reset();
mMatrix.preScale(sx,sy);
mMatrix.preTranslate(tx,ty);
Copy the codeExpressed by the matrix:
After a
This is the same thing as multiplying the input matrix times the current matrix
mMatrix.reset();
mMatrix.postScale(sx,sy);
mMatrix.postTranslate(tx,ty);
Copy the code
Four,
This paper deeply analyzes the principle of Matrix, and explains its common methods and the method of front and back multiplication. If you have any questions during the reading, please feel free to contact me.
GitHub:github.com/Idtk Blog :www.idtkm.com Twitter :weibo.com/Idtk Email :[email protected]
reference
Matrix Android about Matrix (Matrix) some understanding of the homogeneous coordinate system entry-level thinking about secondary coordinates and projection transformation Matrix