Custom View series directory

Method involves

First, color matrix

The color matrix is a 4×5 matrix representing three primary colors and transparency in the form of an array

[ a, b, c, d, e,
    f, g, h, i, j,
    k, l, m, n, o,
    p, q, r, s, t ]Copy the code

A color is used[R, G, B, A], so the calculation method of matrix and color is

As can be seen from the above formula, the function of the color matrix is divided as follows

• a, b, c, d, eRepresents the red of the three primary colors
• f, g, h, i, jRepresents the green of the three primary colors
• k, l, m, n, oRepresents the blue of the three primary colors
• p, q, r, s, tRepresents the transparency of the color
• The fifth column represents the color offset

Use the sample

First let’s look at the picture without changing the initial matrix

private ColorMatrix mColorMatrix; private Paint mPaint; private Bitmap oldBitmap; mColorMatrix = new ColorMatrix(); mPaint = new Paint(); // Set the paint color filter mPaint. SetColorFilter (new ColorMatrixColorFilter(mColorMatrix)); Log.d("TAG", Arrays.toString(mColorMatrix.getArray())); / / create Bitmap oldBitmap = BitmapFactory. DecodeResource (getResources (), R.d rawable. Header); DrawBitmap (oldBitmap,0,0,mPaint); / / the Log TAG: [1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0]Copy the code

Now let’s create a new matrix and use the set method to use this matrix and change the color of the image

MColorMatrix. Set (new float [] {,1,0,0,0,0.5 f 1, 0, 0, 0, 0,0,1,0,0, 0,0,0,1,0});Copy the code

Two, common methods

1, the rotation

The API is as follows:

/** * public void setRotate(int axis, 1) */ public void setRotate(int axis, 2) float degrees)Copy the code

A, rotate around the red axis

We can construct a three-dimensional vector coordinate system based on the three primary colors. When we rotate around red, we blur the red to a point, green to the abscissa, blue to the ordinate, and rotate theta °.

Example coordinate system

According to the parallelogram rule, the calculation results of R, G, B and A are as follows:

Matrix representation:

B. Rotate around the green axis

The green becomes a dotted point, the blue is the horizontal axis, the red is the vertical axis, and the rotation θ°.

Example coordinate system

According to the parallelogram rule, the calculation results of R, G, B and A are as follows:

Matrix representation:

C. Rotate around the blue axis

The blue is dashed to a point, the red is the horizontal axis, and the green is the vertical axis. Rotate theta degrees. Example coordinate system

According to the parallelogram rule, the calculation results of R, G, B and A are as follows:

Matrix representation:

Use the sample

Set the tone here to rotate 90° around the red axis

// rotate green and blue McOlormatrix. setRotate(0,90); // Log D/TAG: [1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 4.371139 e-8, 1.0, 0.0, 0.0, 0.0, 1.0, 4.371139 e-8, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0]Copy the code

As can be seen from the Log, the result also verifies our above theory. The picture effect is as follows:

2, scaling

The API is as follows:

/** * rScale indicates the scale of the red values * gScale indicates the scale of the green values * bScale indicates the scale of the blue values * aScale indicates the scale of the transparency values */ public void setScale(float rScale, float gScale, float bScale,float aScale)Copy the code

The scaling method of ColorMatrix is actually to scale the values of R, G, B and A respectively according to the operation rules of the matrix. Of course, the existing ColorMatrix will be initialized before the operation.

Calculation results of R, G, B and A:

Matrix representation:

Use the sample

Set here, all scales to 1.1

McOlormatrix. setScale(1.1f,1.1f,1.1f,1.1f); / / the Log D/TAG: [1.1, 0.0, 0.0, 0.0, 0.0, 0.0, 1.1, 0.0, 0.0, 0.0, 0.0, 0.0, 1.1, 0.0, 0.0, 0.0, 0.0, 0.0, 1.1, 0.0]Copy the code

As we can see from the Log, the result also verifies the understanding of scaling, and the image looks like this:

We can also make a color channel, such as red:

// McOlormatrix.setscale (1,0,0,1); / / the Log D/TAG: [1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0]Copy the code

3. Saturation

The API is as follows:

Public void setSaturation(float sat) */ public void setSaturation(float sat)Copy the code

The setSaturation method can increase or decrease the saturation of colors according to a certain proportion. When 0 is set, the gray image is represented. When the value is set to 1, the color does not change.

The principle of gray image color removal: as long as the value of RGB tri-color channel is set to the same, that is, R=G=B, then the image will become gray, and in order to ensure the brightness of the image, it is necessary to make the result of R+G+B in the same channel close to 1.

• In MATLAB, pixel gray value is constructed according to the ratio of 0.2989r, 0.5870g and 0.1140b
• In OpenCV, pixel gray value is constructed according to the ratio of 0.299r, 0.587g and 0.114b
• In Android, pixel gray value is constructed according to the ratio of 0.213r, 0.715g and 0.072b

Use the sample

Here set the saturation to 0 to test the gray effect

/ / gray mColorMatrix setSaturation (0 f); // Log D/TAG: [0.213, 0.715, 0.072, 0.0, 0.0, 0.213, 0.715, 0.072, 0.0, 0.0, 0.213, 0.715, 0.072, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0]Copy the code

The printed Log also verifies the above description of the image grayscale, of course, there are sources for saturation from 0% – 100% calculation, interested students can view the following source code. Gray image effect is as follows:

3, ColorMatrix multiplication

1, set up

Set the new matrix to override the previous content, you can set a single matrix, or set the product of two matrices. The API is as follows:

public void set(ColorMatrix src)
public void set(float[] src)

public void setConcat(ColorMatrix matA, ColorMatrix matB)Copy the code

Here’s the main thingsetConcatMethod, which represents the multiplication of two ColorMatrix, the matrix is expressed as:

Use the sample

MColorMatrixA = new ColorMatrix(new float[]{1 0.3f,0,0,0,0, 0.3f,0,0.1f,0,0.6f,1,0,0,0,1,1}); MColorMatrixB = new ColorMatrix(new float[]{1,0,0,0,1,1,0, 0.5f,0.1f,0.9f,0.8f,0,0,0,0,1,0.8f}); MColorMatrix = new ColorMatrix(new float[]{0,0,0,0,0,0,0,0,0,0,0}); mColorMatrix.setConcat(mColorMatrixA,mColorMatrixB); Log.d("TAGA", Arrays.toString(mColorMatrixA.getArray())); Log.d("TAGB", Arrays.toString(mColorMatrixB.getArray())); Log.d("TAGAB", Arrays.toString(mColorMatrix.getArray())); // Log D/TAGA: [1.0, 0.3, 0.0, 0.0, 0.0, 0.0, 1.0, 0.3, 0.0, 0.1, 0.0, 0.6, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0] D/TAGB: [1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 0.5, 0.1, 0.9, 0.8, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.8] D/TAGAB: [1.0, 0.3, 0.0, 0.0, 1.15, 0.030000001, 1.27, 0.24000001, 0.0, 0.6, 0.1, 1.5, 0.8, 0.0, 0.3, 0.0, 0.0, 0.0, 1.0, 1.8]Copy the code

2, before

The forward times the current matrix times the input matrix, here take a look at the source code, it can be easier to understand:

SetConcat (this, prematrix) public void preConcat(ColorMatrix prematrix) {setConcat(this, prematrix); }Copy the code

PreConcat (prematrix) method is equivalent to calling setConcat(this, prematrix) method

Use the sample

mColorMatrix.reset();
mColorMatrix.preConcat(mColorMatrixA);
mColorMatrix.preConcat(mColorMatrixB);Copy the code

If preConcat is called multiple times in the above example, it equals

3, after take

This is the same thing as multiplying the input matrix times the current matrix, here take a look at the source code, it can be easier to understand:

SetConcat (postmatrix, this) public void postConcat(ColorMatrix postmatrix) {setConcat(postmatrix, this); }Copy the code

PostConcat (prematrix) method is equivalent to calling setConcat(postmatrix, this).

Use the sample

mColorMatrix.reset();
mColorMatrix.postConcat(mColorMatrixA);
mColorMatrix.postConcat(mColorMatrixB);Copy the code

The above example calls postConcat several times, because the matrix satisfies the commutative law, then equals

Four,

In this paper, we have studied the principle of ColorMatrix, and analyzed its setRotate, setScale and setSaturation methods, as well as matrix multiplication (front multiplication and back multiplication). If you have any questions during the reading, please feel free to contact me. Blog :www.idtkm.com GitHub:github.com/Idtk Twitter :weibo.com/Idtk Email :[email protected]

Five, the reference

ColorMatrix Paint ColorMatrix and filter effect Android Matrix Matrix details