Android Matrix detailed and Advanced (i)

1 Overview

Here we will explain in detail the various methods of the matrix and its usage. Matrix is called matrices, in the previous article explaining Colorfilter , we explained the ColorMatrix, he is a 4*5 matrix. And here, the matrix we're explaining is not for processing colors, but for working with graphics. He is a 3*3 matrix.

2 principle

Let's take a look at what the matrix looks like:

Here you can see the matrix code to get. So what does this matrix represent, and here by their name can be seen that scale is scaling, skew is the wrong cut (canvas transformation has been said), trans is translational, PERSP represents perspective (Official document, also no detailed explanation, The perspective is simply described here). It is necessary to divide the matrix into 4 blocks according to their function:

As shown, these four areas have a role to play. The following will explain the various roles in detail, first to see how the matrix affects the image. First look at the coordinate system of the screen:

See, this represents the coordinate system of the screen, where the x, y axes are well known, but in fact, an object he is in a three-dimensional space, so there must be a Z axis. Our screen, like a window, through which we see the world behind the screen, where there are various objects, we see a projected image mapped on the x, y plane. The screen, like a lens, maps the object inside to the X, Y plane and becomes a two-dimensional image. So if we take this lens of the screen along the z axis, zooms or pull it in, then what happens to the image, it will be smaller or bigger. It's like a car sitting on a plane looking at the ground through a window, and the size you see on the ground is different.

The conclusion is that the pixels displayed on the screen have not only x, Y coordinates, but also z-axis effects. So here the corresponding pixel description is represented by a matrix of 3 rows and columns:

X, y represents the coordinates on the x, Y axis, and 1 represents the default for the screen's coordinates on the z axis. If you make 1 bigger, the screen will pull away and the graphics will be smaller.

Now let's see how the matrix works on the values of each pixel. The multiplication of matrices needs to be used here, first of all, it is necessary to be clear that the pre-and post-multiplication of matrices is not the same, that is, the multiplication Exchange law is not satisfied.

Here we look at the principle through a rotation transformation, in fact, a picture around a point rotation, that is, all the points are rotated around a point, so only need to focus on a point of the situation can be:

Assume that there is a point where the relative coordinate origin is rotated clockwise, and that the P-point distance from the origin of the coordinate is r, such as:

Then there are:

The matrix operation is as follows:

As you can see from here, the values in the matrix are how the x, y coordinates and the z-axis are used for the pixel points.

At the same time, you can see that the above matrix four block area of the Shard is also because of the matrix multiplication operation decided, because here the multiplication operation, the upper left corner of the four values, can and X, Y value to do multiplication, so can affect the rotation and other operations, and the upper right corner of the module, only to do the addition, so can only The lower right corner of the module main pipe z-axis, natural can be scaled, the lower left corner of the module is generally not to move him, otherwise the x, Y value added to the z axis, will not be controlled.

3 Basic Method Analysis

After explaining how the matrix works on the pixel, let's explain how it's done.

(1) Constructors

public Matrix()public Matrix(Matrix src)

There are two constructors, the first one is to create a unit matrix directly, and the second is to create a new matrix from the provided matrix (with deep copy)

The unit matrix is as follows:

(2) isidentity and Isaffine

public boolean isIdentity()//判断是否是单位矩阵public boolean isAffine()//判断是否是仿射矩阵

is the unit matrix is very simple, do not explain, whether here is affine matrix may be difficult for everyone to understand.

First, let's look at what an affine transformation is. Affine transformation is a two-dimensional coordinate to the two-dimensional linear transformation, to maintain the two-dimensional graph of the "straightness" (that is, the transformation of straight line or straight line will not bend, arc or arc) and "parallelism" (refers to maintain the relative position of the two-dimensional graph is unchanged, parallel lines or parallel lines, and the position of the line Can be achieved by a series of atomic transformations, including: Pan, zoom, flip, rotate, and split. Here, in addition to the perspective can change the z-axis, the other transformations are basically the above-mentioned atomic transformation, so as long as the last line is 0,0,1 is the affine matrix.

(3) Rectstaysrect

public boolean rectStaysRect()

Determines whether the matrix can still transform a rectangle into a rectangle. Returns True when the matrix is a unit matrix, or is only translated, scaled, and rotated by a multiple of 90 degrees.

(4) Reset

public void reset()

Resets the matrix to the unit matrix.

(5) Settranslate

public void setTranslate(float dx, float dy)

Sets the translation effect, where the parameters are the amount of translation on X, Y, respectively.
As follows:

The code is as follows:

matrix = new Matrix();canvasmatrix, paint);matrix.setTranslate(1001000);canvasmatrix, paint);

(6) Setscale

public void setScale(float sx, float sy, float px, float py)public void setScale(float sx, float sy)

Two methods are set to zoom to the matrix, Sx,sy represents a multiple of scaling, Px,py represents the center of the zoom. This is similar to the above do not explain.

(7) SetRotate

 public void setRotate(float degrees, float px, float py) public void setRotate(float degrees)

Similar to the above, no longer explained.

(8) Setsincos

public void setSinCos(float sinValue, float cosValue, float px, float py)public void setSinCos(float sinValue, float cosValue)

This method at first glance may be a bit masked, in fact, in the previous principle, we explained a rotation example, his final matrix effect is this:

In fact, the rotation, is the use of such a matrix, it is obvious that the parameters here are clear.
Sinvalue: The sin value in the corresponding graph
Cosvalue: corresponding COS value
PX: Center x-coordinate
PY: The y-coordinate of the center

Looking at an example, we rotate the image 90 degrees, then 90 degrees of sin and Cos are 1 and 0 respectively.

Look at the following code:

Matrixmatrix = new Matrix();matrix.setSinCos(10, bitmap.getWidth2, bitmap.getHeight2);canvas.drawBitmap(bitmap, matrix, paint);

(9) Setskew

public void setSkew(float kx, float ky, float px, float py)public void setSkew(float kx, float ky)

Wrong cut, here Kx,ky respectively represents the error cutting factor on X, Y, px,py represents the center of the wrong cut. Do not understand the wrong cut in front of the canvas transformation To see, this is no longer explained.

(Ten) Setconcat

public boolean setConcat(Matrix a,Matrix b)

The value of the current matrix becomes the product of A and B, and its meaning is discussed in the advanced method below.

4 Advanced Method Analysis

In the basic method above, there are different effects on the set method of the transformation, but each set will erase the last effect, such as calling Setskew,settranslate in turn, then only settranslate will work. So how do we combine the two effects? The matrix provides us with a number of ways. But the main categories are 2:

Prexxxx: Start with a pre, such as Pretranslate
Postxxxx: Starts with post, for example Postscale

They represent the pre-multiplication, and the later multiplication respectively. Look at the code:

matrix = new Matrix();matrix.setTranslate(1001000);matrix.preScale(0.50.5f);

Here the matrix is multiplied by a scale matrix, converted into a mathematical formula as follows:

As can be seen from the above, the resulting matrix contains both the zoom information and the panning information.
After the multiplication of nature is the matrix in the back, and the scaling matrix in front, because the matrix before and after multiplication is not equivalent, it also led to their effect is different. Let's take a look at the results of the post-multiplication:

As you can see, the result is different from the above, and this is not the result we want, there is no change in scale, but the translation is halved, in other words, the distance of the translation is also scaled. Therefore, we need to pay attention to the relationship between multiplication.

Come and see what they correspond to:

Front Multiply:

After multiplication:

It can be seen that the translational distance of the rear multiply is affected.

Understand the meaning of the elimination of pre-and post-multiplication, in the process of use, the superposition of multiple effects, the same should be noted, otherwise the effect is not expected.

In the following article we continue to explain the high-level usage of matrix

Android Matrix detailed and Advanced (i)