SoFunction
Updated on 2025-04-09

Matrix usage of Android Transform

x' = x + 100;

y' = y - 100;

That is, on the original basis, it is moved right by 100 and upward by 100, and the unit is pixels. The third column has the third behavior 2, which is expressed as 1/2 of the previous proportion. Remember this is easy to make mistakes.

The properties of the specific coordinates corresponding to deformation are given below

|scaleX, skewX, translateX| 

|skewY, scaleY, translateY|

|0       ,0        , scale       |

practice

Check out the usage through the code

Copy the codeThe code is as follows:

public class MatrixTransformView extends View {

private Matrix mMatrix;
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap mBitmap;

public MatrixTransformView(Context context) {
super(context);
}

public MatrixTransformView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public void setDrawable(int resId) {
mBitmap = (getContext().getResources(), resId);
}

/*
* Set the matrix and repaint it
*/
public void setMatrixValues(float[] array) {
if (mMatrix == null) {
mMatrix = new Matrix();
}
();
(array);
invalidate();
}

public void resetMatrix() {
if (mMatrix != null) {
();
}
invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
if (mMatrix != null) {
Paint paint = mPaint;
(mBitmap, mMatrix, paint);
}

(canvas);
}
}

Through the setValues ​​method of Matrix, set the matrix coordinate value of 3*3.

One thing that is emphasized is that when calling setMatrixValues, you need to call invalidate method to let the View call onDraw and redraw.

These are the basic usages of matrices. Often, during the development process, deformation is not directly achieved through matrix coordinates, because if you want to achieve selection, it is more complicated and involves trigonometric functions. It is very painful for people who have already forgotten the same data. Of course, if you have to use it, it is not difficult to calculate.

So in order to avoid using matrix coordinates directly to operate deformation, the Matrix class provides methods to change:

set method: setScale, setSkew, setTranslate, setRotate

Post method: postScale, postSkew, postTranslate, postRotate

pre-method: preScale, preSkew, preTranslate, preRotate

The set method is to set directly, and each time the set method is called, the matrix will be reset first. Post can be understood as setting multiple times to be effective, and the effect is accumulated. Here we understand it as exactly the same as the post method, and we will be confused later in 3D.

Look at the code:

Copy the codeThe code is as follows:

public class MatrixTransformView extends View {

private Matrix mMatrix;
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Bitmap mBitmap;

public MatrixTransformView(Context context) {
super(context);
}

public MatrixTransformView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public void setDrawable(int resId) {
mBitmap = (getContext().getResources(), resId);
}

/*
* Set the matrix and repaint it
*/
public void setMatrixValues(float[] array) {
if (mMatrix == null) {
mMatrix = new Matrix();
}
();
(array);
invalidate();
}

public void postMatrixScale(float scaleX, float scaleY, float centerX, float centerY) {
if (mMatrix == null) {
mMatrix = new Matrix();
}
(scaleX, scaleY, centerX, centerY);
invalidate();
}

public void postMatrixSkew(float skewX, float skewY, float centerX, float centerY) {
if (mMatrix == null) {
mMatrix = new Matrix();
}
(skewX, skewY, centerX, centerY);
invalidate();
}

public void postMatrixTranslate(float translateX, float translateY) {
if (mMatrix == null) {
mMatrix = new Matrix();
}
(translateX, translateY);
invalidate();
}

public void postMatrixRotate(float degree, float centerX, float centerY) {
if (mMatrix == null) {
mMatrix = new Matrix();
}
(degree, centerX, centerY);
invalidate();
}

public void resetMatrix() {
if (mMatrix != null) {
();
}
invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
if (mMatrix != null) {
Paint paint = mPaint;
(mBitmap, mMatrix, paint);
}

(canvas);
}
}

There are only so many basic uses of Matrix.

Extended

Deformation requires canvas to draw. The drawing of canvas requires bitmap, so this section uses a control inherited from View and set bitmap through setDrawable. Then the selection target must be a bitmap. In the demo of the article, bitmap is obtained by the setDrawable method with the parameter int resource. If you want to deform other controls, such as ViewGroup, you can use the following method:

Copy the codeThe code is as follows:

Matrix m = new Matrix();
(new float[] {
1, 0, 0,
0, 1, 0,
0, 0, 1
});
Bitmap bp = ((), (), .RGB_565);
Canvas can = new Canvas(bp);
(can);
bp = (bp, 0, 0, (), (), m, true);
(bp);

The effect is achieved by converting the ViewGroup to Bitmap, then customizing an Image to deform and hiding the ViewGroup.

doubt

1. If anyone knows the difference between post and pre, please let me know to see if my understanding is correct.

2. Can the ViewGroup be directly deformed, not the kind I mentioned above.