Introduction to Camera using Android Transform

Introduction

The Matrix of Android deformation (Transform) is used to summarize the use of Camera. Camera mainly implements 3D deformation, rotation, rotation, etc. The source code of Camera is Native (Local Code) the provided interfaces are also relatively simple. Official introduction: A camera instance can be used to compute 3D transformations and generate a matrix that can be applied, for instance, onCanvas.

Source image:

After Deformation:

API usage

Camera provides the following methods:

Save: save the current status

Restore: returns the current status

Translate: translate data in the three widgets x, y, and z.

RotateX: centered around (0.0) and selected around the X axis

RotateY: The rotateY is centered around (0.0) and is selected around the Y axis.

RotateZ: The rotateZ is centered on (0.0) and rotated (the rotation principle is the same as that of Matrix, but the opposite is reversed, which is counter-clockwise)

...

There are so many common

Practice

Directly run the Code:

Copy codeThe Code is as follows: public class CameraTransformView extends View {

Private Bitmap mBitmap;
Private Camera mCamera;
Private Matrix mMatrix;
Private int deltaX, deltaY, deltaZ, extraZ;
Private int centerX, centerY;

Public CameraTransformView (Context context, AttributeSet attrs ){
Super (context, attrs );
}

Public void setDrawable (int resId ){
MBitmap = BitmapFactory. decodeResource (getResources (), resId );
CenterX = mBitmap. getWidth ()/2;
CenterY = mBitmap. getHeight ()/2;
MCamera = new Camera ();
MMatrix = new Matrix ();
}

Public void setDelta (int x, int y, int z, int extra ){
DeltaX + = x;
DeltaY + = y;
DeltaZ + = z;
ExtraZ + = extra;
Invalidate ();
}

Public void reset (){
DeltaX = 0;
DeltaY = 0;
DeltaZ = 0;
Invalidate ();
}

@ Override
Protected void onDraw (Canvas canvas ){
MCamera. save ();
MCamera. translate (10, 10, extraZ );
MCamera. rotateX (deltaX );
MCamera. rotateY (deltaY );
MCamera. rotateZ (deltaZ );
MCamera. getMatrix (mMatrix );
MCamera. restore ();

MMatrix. preTranslate (-this. centerX,-this. centerY );
MMatrix. postTranslate (this. centerX, this. centerY );

Canvas. drawBitmap (mBitmap, mMatrix, null );
Super. onDraw (canvas );
}

}

In fact, the Camera change encapsulates a Matrix, which can be obtained through the getMatrix method. In the Demo above, this method is used for additional processing. Let's take a look:Copy codeThe Code is as follows: @ Override
Protected void onDraw (Canvas canvas ){
MCamera. save ();
MCamera. translate (10, 10, extraZ );
MCamera. rotateX (deltaX );
MCamera. rotateY (deltaY );
MCamera. rotateZ (deltaZ );
MCamera. getMatrix (mMatrix );
MCamera. restore ();

// MMatrix. preTranslate (-this. centerX,-this. centerY );
// MMatrix. postTranslate (this. centerX, this. centerY );

Canvas. drawBitmap (mBitmap, mMatrix, null );
Super. onDraw (canvas );
}

In the onDraw method, the Camera method can be used to complete deformation. Pay attention to rows 11 and 12. If you do not set the two rows during onDraw, you can see the following results:

As you can see, it rotates the center point (0, 0) according to the Y axis. In common applications, most of them want the center point to be on the center point of the image. So you need to join

Copy codeThe Code is as follows: mMatrix. preTranslate (-this. centerX,-this. centerY );
MMatrix. postTranslate (this. centerX, this. centerY );

In fact, the focus of this section is to analyze these two sentences.

We can see from the Camara API that it does not provide the method for setting the deformation center. What should we do? The basic idea is: assume that the image center is (centerX, centerY ), since Camera always uses () as the center point, I first move the image matrix to the left of centerX, and then move centerY upwards so that (centerX, centerY) is in the initial) in this case, the center point is changed to (centerX, centerY), and the goal is achieved. Of course, this is not over yet. Since you have offset (-centerX,-centerY ), after the deformation, you have to move it back, and then move centerX and centerY to the lower right.

According to matrix transformation, it can be expressed:

1, 0,-centerX 1, 0, centerX

0, 1,-centerY * deformation matrix * 0, 1, centerY

0, 0, 1 0, 0, 1

Then, how can we explain the combination of ideas and code? Next, let's look at some of the knowledge in Matrix.

Review

Matrix provides three deformation methods: set, post, And pre.

Set is first reset and then Deformation

Pre can be interpreted as multiplication first, and the right multiplication corresponding to the matrix Principle

Post can be understood as a post multiplication, which corresponds to the left multiplication in the matrix distance.

Don't worry. Next, let's take a look at what is premultiplication, then multiplication, left multiplication, and right multiplication.

For example:

Source image

Enlarge a graph to 2 times the center point.

The expected result is that the center point remains unchanged (the image is truncated by the edge)

Then follow the previous improvement idea: assume that the center is (50, 50) First shifted to 50 on the left, that is, (-50,-50), then amplified, and then shifted to 50 on the right, that is, (50, 50)

Api call: setScale (2, 2), preTranslate (-50,-50), postTranslate (50, 50)

As shown in the following example, the corresponding matrix is:

1, 0,-50, 0, 0, 0, 50, 0, 50

,-50 *, 2 *, 50 =, 50

0, 0, 1 0, 1 0, 0, 1 0, 0, 1

We can see that the result is magnified to 2 times, but it is moved to the lower right (50, 50). It is strange that, if this is the case, the expected matrix should be (twice the method, move to the upper left (-50,-50 ))

2, 0,-50

0, 2,-50,

0, 0, 1

Okay. The following questions are revealed:

The api execution sequence is: preTranslate (-50,-50)-> setScale ()-> postTranslate (50, 50 ).

Answer: The Matrix conforms to the changing principle. If the image passes through F1, F2... fn this deformation, the corresponding matrix is T1, t2... tn, conforming to Matrix T = Tn * Tn-1... * T1

Then the correct matrix algorithm should be

, 50, 0,-50,-50

, 50 *, 2 *,-50 =,-50

0, 0, 1 0, 1 0, 0, 1 0, 0, 1

The principle of pre as right multiplication and post as left multiplication is also explained here.

So far, everything has been explained.

Regression

Back to the Camera Demo, since the deformation center of Camera is (0, 0), and the deformation of Camera is actually the deformation of Matrix, we can get this Matrix through the getMatrix method, then, you can set the center point by moving the pre to the left and the post to the right after deformation.