preface
In previous classes, we have learned about the whole android program in detail, from Startup to painting. From this, we have involved the Canvas drawing board and our Paint control color style brush. Then we will not explain in detail in the previous basic chapter. Those API s have been published in the previous basic chapter, I also annotated it in great detail. Today, let's learn about the filters that Paint advanced really needs to know
- Official account: Xiao Xin chat Android
- github address
Filter
1. Filter effect
From the above figure, we can see that the color display effects of the four filter effect images are different, that is, the so-called filter is actually just to adjust the color of the original image, so we need to adjust the color of the image. We need to know several concepts, that is, our image composition, color channel, color mode and color mode
2. Image composition
Before specifically talking about the filter, today we will systematically and truly understand what our images are in our computer. We all know that our images have various formats in the computer system, such as jpg,png,gif and so on
Well, we also know that the image file in our computer is actually a binary bytecode file, so the image is essentially a binary file, and then our cpg and gpu recognize the binary file and display it on our screen. What we need to pay attention to now is, What exactly does he keep among these documents?
In fact, the data stored in an image file is generally divided into two pieces
- Image information
- Image data
The latter is easy to understand. We can understand it as the data of specific pixels of the image. In fact, the former can be understood as a group of information. The function of this group of information is to make our CpG and GPU display the image based on different rules of this group of information set by our door, so the display effect is different,
Taking one format (PNG) as an example, I picked up the explanation of the structure of this image on the Internet (just take a rough look)
PNG File structure
For a PNG For a file, its file header is always described by fixed bit bytes:
Decimal number 137 80 78 71 13 10 26 10
Hexadecimal number 89 50 4E 47 0D 0A 1A 0A
The first byte is 0 x89 Beyond ASCII The range of characters, which is to avoid that some software will PNG Files are treated as text files. The rest of the file consists of more than 3 PNG Data block( Chunk)Composed in a specific order, therefore, a standard PNG The file structure should be as follows:
PNG File flag PNG data block ...... PNG data block
PNG Data block( Chunk)
PNG Two types of data blocks are defined. One is called critical data block(critical chunk)，This is the standard data block, and the other is called auxiliary data block(ancillary chunks)，This is an optional data block. The key data block defines four standard data blocks, each PNG All files must contain them, PNG Reading and writing software must also support these data blocks. Although PNG There are no requirements in the document specification PNG The codec encodes and decodes optional data blocks, but the specification advocates supporting optional data blocks.
The following table is PNG The category of data blocks in which the key data blocks are distinguished by dark background.
For simplicity, we assume that PNG In the file, these four data blocks are stored in the above order, and all appear only once.
Data block structure
PNG In the file, each data block consists of four parts, as follows:
name Number of bytes explain
Length (length) 4 byte Specifies the length of the data field in the data block, and its length does not exceed(231－1)byte
Chunk Type Code (Block type code) 4 byte Block type code ASCII letter(A-Z and a-z)form
Chunk Data (Block data) Variable length Storage according to Chunk Type Code Specified data
CRC (Cyclic redundancy detection) 4 byte Stores cyclic redundancy codes used to detect errors
From the above explanation, we can see that in fact, the so-called image formats are just different published standards, so the cpu parsing rules are also inconsistent. At the same time, a picture contains multiple data blocks, as shown in the following figure
This is the data of a jpg diagram I opened. At this time, what I see is hexadecimal data. Although we don't know what these data are, let's combine the above, assuming that the data in the first row is the jpg flag, and the parsing rules and other information may be recorded in the second to eighth rows. Similarly, the latter is data, so we can look at a graph in this way Generally understand one meaning: sign + image information + data - finally forms a complete image, and the image is calculated and displayed according to the data and the analysis rules. Then for today's filter, we need to understand the two important information color channels and color modes in the image
3. Color channel, color mode
Color channel: the channel for saving image color information is called color channel. This sentence is the basic definition of color channel. We can understand it as the data recording color information. Each image has one or more color channels, and the default color channel information in the image depends on the color mode
Color mode: color mode we can understand that a certain color is expressed as a digital model, or a way to record image color. It is divided into RGB mode, CMYK mode, HSB mode, Lab color mode, bitmap mode, gray mode, index color mode, two-tone mode and multi-channel mode.
In fact, we think that the color I want to display now is represented by numbers. In the most classic RGB mode, we can understand that the current pixel of R(255) G(0) B(0) is displayed in red during recognition. It is mixed by three colors of red, green and blue to display the color we want, and its degree value is in the range of 0-255
Summary: in other words, in the display of the image, each point is mixed by the color values determined by the mode to form the color we want. In fact, the realization of our filter effect is to filter the color channel and operate on its original mode values to change the image color effect. This is what we do mirror
4. Color matrix
In Android, the color mode adopted by Android is RGBA mode, that is, the concept of Alpha transparency is added on the basis of red, green and blue, so it is now a four channel mode. In Android, when Android obtains the image information, the color channel information of the current image is saved in a matrix. It is represented by an array That's it
What we see here above is a four channel representation, which we will find in the door
1-1
2-2
3-3
4-4
The position of is a value of 1. Then we understand it as the coefficient of color. 1 is the original value. If it is 0.5, the four current rgba options are processed in proportion. If you want to change to translucent, it is OK to change the current value of a to 0.5, and double the red to 2. But in this case
This four medium matrix can't be done. It uses a 4 * 5 matrix as the real expression in android
Finally, add a column as the sub element coordinate, which is actually the component value. If you want to achieve the appeal effect of our color value in the following color matrix, 100 in the second row means to add 100 green values based on the previous color, then this is our simplest understanding, The real implementation of him is actually the calculation of matrix
4. Matrix operation
The operation rule of matrix is that a row of matrix A is multiplied by a column of matrix C as a row of matrix R. matrix C is the ARGB information contained in the picture, and matrix R is the new color component after the color matrix is applied to C. the operation results are as follows:
R' = aR + bG + cB + dA + e;
G' = fR + gG + hB + iA + j;
B' = kR + lG + mB + nA + o;
A' = pR + qG + rB + sA + t;
The color matrix is not so profound as it looks. In fact, few parameters need to be used, and it is very regular. The first line determines red and the second line determines green
The third row determines blue, the fourth row determines transparency, and the fifth column is the offset of color. The following is a color matrix used in practice.
If this matrix is applied to each color component, R=A*C. after calculation, it will be found that each color component actually has no change (R '= R G' = G B '= B A' = A).
After the matrix calculation shown in Figure 1.5, it will be found that the red component increases by 100 and the green component increases by 100. This effect is that the picture is yellow, because the yellow is obtained after the red and green are mixed. The Yellow increases by 100, and the picture is naturally yellow.
Changing each color component can not only modify the color offset in column 5, but also multiply the corresponding color value by a multiple as shown in the above matrix. In Figure 1.6 above, multiply the green component by 2 to double the original. So far, we have understood how to change each color component through the color matrix.
5. Filter realization
Then, in the implementation of android, it is very simple to use. It only needs to rely on one API
// Color channel filtering
/*ColorMatrix colorMartrix = new ColorMatrix(new float[]{
1, 0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,1,0,
});
paint.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
So here is my demo code. You can try the effect
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
setLayerType(View.LAYER_TYPE_SOFTWARE,null);
RectF rectF = new RectF(0,100,bitmap.getWidth(),bitmap.getHeight());
paint.reset();
paint.setColor(Color.RED);
canvas.drawBitmap(bitmap,null, rectF,paint);
// Translation operation --- addition
/*ColorMatrix colorMartrix = new ColorMatrix(new float[]{
1, 0,0,0,0,
0,1,0,0,100,
0,0,1,0,0,
0,0,0,1,0,
});*/
// Inverse effect -- negative effect
/* ColorMatrix colorMartrix = new ColorMatrix(new float[]{
-1, 0,0,0,255,
0,-1,0,0,255,
0,0,-1,0,255,
0,0,0,1,0,
});*/
// Scaling - multiplication - color enhancement
/*ColorMatrix colorMartrix = new ColorMatrix(new float[]{
1.2f, 0,0,0,0,
0,1.2f,0,0,0,
0,0,1.2f,0,0,
0,0,0,1.2f,0,
});*/
// Black and white photos
// Decolorization principle: as long as the color information of R, G and B channels is set to the same, the image will turn gray,
// At the same time, in order to keep the image brightness unchanged, R + G + B in the same channel = 1
//
/*ColorMatrix colorMartrix = new ColorMatrix(new float[]{
0.213f, 0.715f,0.072f,0,0,
0.213f, 0.715f,0.072f,0,0,
0.213f, 0.715f,0.072f,0,0,
0,0,0,1,0,
});*/
// Hair color effect -- - (such as red and green exchange)
/*ColorMatrix colorMartrix = new ColorMatrix(new float[]{
0,1,0,0,0,
1, 0,0,0,0,
0,0,1,0,0,
0,0,0,1,0,
});*/
// Retro effect
/*ColorMatrix colorMartrix = new ColorMatrix(new float[]{
1/2f,1/2f,1/2f,0,0,
1/3f, 1/3f,1/3f,0,0,
1/4f,1/4f,1/4f,0,0,
0,0,0,1,0,
});*/
// Color channel filtering
ColorMatrix colorMartrix = new ColorMatrix(new float[]{
1, 0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,1,0,
});
RectF rectF2 = new RectF(600,100,600 + bitmap.getWidth(),bitmap.getHeight());
paint.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,null, rectF2,paint);
}
Then, in the class on other effects such as filter inversion, light and shadow, you can try some of the most basic operations here
After reading three things ❤️
If you think this content is quite helpful to you, I would like to invite you to help me with three small tasks: like, forwarding, and having your "praise and comments" is the driving force for my creation.