Introduction
The Android deformation (Transform) matrix, to summarize the use of camera, camera mainly to achieve 3D deformation, rotation, rotation, etc., camera source code is implemented by native (local codes), the interface is also relatively simple. Official introduction: A camera instance can be used to compute 3D transformations and generate a matrix that can is applied, for instance, On a Canvas
.
Effect chart
Original:
Variant after:
API use
Camera provides the following methods:
Save: Saving the current state
Restore: Reply to current status
Translate: Panning within a x,y,z three-bit control
Rotatex: With (0.0) as the center, around the x axis to select
Rotatey: With (0.0) as the center, around the y axis to select
Rotatez: (0.0) as the center, rotation (here and the matrix rotation principle, except reverse, counterclockwise)
...
That's the most common.
Practice
Directly on the code:
Copy Code code 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 (ten, 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 change of camera is to encapsulate a matrix of matrices, which can be obtained by Getmatrix method. In the above demo used the method to do some extra processing, the following specific look:
Copy Code code as follows:
@Override
protected void OnDraw (Canvas Canvas) {
Mcamera.save ();
Mcamera.translate (ten, 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 the deformation. Note that 11, 12 lines, if you do not make two rows when OnDraw, you can see the effect is as follows:
As you can see, the rotation center point of the Y axis is (0,0), and most of the usual applications want its center point at the center point of the picture. So you need to join
Copy Code code as follows:
Mmatrix.pretranslate (-this.centerx,-this.centery);
Mmatrix.posttranslate (This.centerx, this.centery);
In fact, the focus of this section is to dissect these two words.
From the Camara API can be seen that it does not provide deformation center point of the setting method, then how to do it, the basic idea is: Suppose the picture center point is (centerx,centery), since camera always take (0,0) as the center point, Then I will first move the graphics matrix to the left CenterX, and then move up the CenterY, let (centerx,centery) just pinch in the initial (0,0), so deformation, the center point becomes (Centerx,centery), to achieve the purpose, Of course this is not over, since you are displaced (-centerx,-centery), then you have to move back after the deformation, and then move to the lower right centerx,centery respectively.
According to the transformation of the matrix, it can be expressed as:
1,0,-centerx 1,0,centerx
0,1,-centery * Deformation Matrix * 0,1,centery
0,0,1 0,0,1
So specifically, how to explain the combination of ideas and code, and then look, we need to review some of the knowledge in the matrix.
Review
The matrix provides three kinds of deformation methods: Set,post,pre.
Set is reset first, then deformation
The pre can be interpreted as the first multiplication, the corresponding right multiplication in the matrix principle
Post can be understood as a back multiply, in the matrix away from the corresponding left-multiply
No hurry, take the next two concrete see what is the first multiply, after the multiply, what is left, right multiply.
As an example:
Original
To zoom in on a graphic to twice times the center point
The desired effect is that the center point remains unchanged (the image is truncated by the edge)
Then according to the previous improvement of the idea: the assumption that the center point is (50,50) first left up 50, that is ( -50,-50) again to enlarge, and then lower right down 50, namely (50,50)
API calls are: Setscale (2,2), Pretranslate ( -50,-50), Posttranslate (50,50)
As usual, the corresponding matrix is:
1,0,-50 2,0,0 1,0,50 2,0,50
0,1,-50 * 0,0,2 * 0,1,50 = 0,2,50
0,0,1 0,0,1 0,0,1 0,0,1
You can see that the result is magnified to twice times, but it's moving right down (50,50), strange if so, the expected effect graph matrix (method to twice times, move to the left) should be the same as the expected effect chart ( -50,-50)
2,0,-50
0,2,-50,
0,0,1
Okay, here's the next suspect:
The order of execution of the APIs here is: Pretranslate ( -50,-50)-> setscale (2,2)-> posttranslate (50,50) No problem
The answer is revealed: The matrix conforms to the principle of change, if the graph passes through f1,f2 ... fn This deformation, the corresponding matrix is t1,t2 ... Tn, conforming to the matrix T = tn*tn-1...*t1
So the correct matrix algorithm should be
1,0,50 2,0,0 1,0,-50 2,0,-50
0,1,50 * 0,0,2 * 0,1,-50 = 0,2,-50
0,0,1 0,0,1 0,0,1 0,0,1
The pre is also explained here as the principle of right multiplication and post for left multiplication.
So this concludes, everything is explained.
Regression
Back to the camera demo, since the camera center point is (0,0), and camera deformation is actually the matrix deformation, we can use the Getmatrix method to get the matrix, and then through the left to move the pre, Move the post to the right after the transformation to achieve the center point setting.