Android image processing--paint Colorfilter

Reprint Please specify source:http://blog.csdn.net/allen315410/article/details/45059989

Usually in Android development, it is generally less likely to use the paint--brush frequently. However, in some special cases, such as custom controls (inherited view), it is sometimes necessary to draw out brushes on the canvas (canvas, which will be described in the next article) as "drawing" out the elements we want. However, many developers know little about brush paint, including myself, so here is a summary of the role and usage of paint in Android image processing today.

A simple understanding of paint

Again, before we learn to paint, we first look at the Paint Class API, where the most we need to focus on is that the paint class gives us a lot of setter methods, you can call setter methods to set their own preferences. Here is a partial setter of the paint class found in Android studio:

OK, you can see that the method provided by paint is still very rich, the following a few frequently used to introduce:

Paint (int flags): Build an instance of paint, commonly used flags are anti_alias_flag, anti-aliasing.

Set (Paint src): Copies another paint to the current paint instance, not much.

Setantialias (Boolean aa): Anti-aliasing.

setcolor (int color): Sets the color of the brush.

Setcolorfilter (colorfilter filter): Setting up a color filter is important, and there are some summaries later.

setstrokewidth (float width): Sets the width of the paint dash.

SetStyle (Paint.style style): Sets the style of the Paint. There are three types of brush styles:

1.paint.style.stroke: Stroke. 2.paint.style.fill_and_stroke: Strokes and fills. 3.paint.style.fill: Fill.

Setxfermode (Xfermode xfermode): Set the mode of the paint, followed by a detailed description of the point, it is important.

Below, we come from defining a view to try using Paint:

public class CustomView1 extends View {private Paint mpaint;    Private Context Mcontext;    Public CustomView1 (Context context) {this (context,null);        } public CustomView1 (context context, AttributeSet Attrs) {Super (context, attrs);        Mcontext = context;    Initpaint ();        private void Initpaint () {//Initialize paint, and set anti-aliasing.        Mpaint = new Paint (Paint.anti_alias_flag);         /** * Set Brush style to stroke * brush style divided into three kinds: * 1.paint.style.stroke: Stroke * 2.paint.style.fill_and_stroke: stroke and fill        * 3.paint.style.fill: Fill */Mpaint.setstyle (Paint.Style.FILL);        Set stroke thickness, in pixels px Note: when Setstrokewidth (0), the stroke width is not 0 but only one pixel mpaint.setstrokewidth (20);    Set the brush color to Custom color Mpaint.setcolor (Color.argb (255,255,128,102)); } @Override protected void OnDraw (canvas canvas) {//Draw a circle, take the center point of the screen as the centre of the Circle Canvas.drawcircle (screenutil.gets CREENW (Mcontext)/2, SCREENUTIL.GETSCREENH (Mcontext)/2,100,mpaint); }}

Well, the above is a simple code to draw a circle, we refer to this custom control in the layout file, run it.

Effect as above, a very round round ah, and so on, looks like a little island flag, OK! I'll change it later.

Colorfilter

As mentioned above, we will introduce the usage of Setcolorfilter (Colorfilter filter) here. Setcolorfilter (Colorfilter filter) to receive a parameter Colorfilter, in Android Studio Click to look at the source code, you can see the colorfilter in the number of small:

public class Colorfilter {    /**     * Holds the pointer to the native Skcolorfilter instance.     *     * @hide * * Public    long native_instance;    @Override    protected void Finalize () throws Throwable {        try {            super.finalize ();        } finally {            Destroyfilter (native_instance);        }    }    static native void Destroyfilter (long native_instance);}

According to our experience, judging colorfilter may be a parent class, the implementation may be the following sub-class completed, and then look at Google's documentation:

At a glance, Colorfilter under 3 sub-class Colormatrixcolorfilter, Lightingcolorfilter, Porterduffcolorfilter, the following one by one.

Colormatrixcolorfilter

Colormatrixcolorfilter translation for color matrix filter, God horse is a color matrix? In fact, the management color matrix in Android is loaded into memory in the form of rgba pixels, which are uniformly managed using the ColorMatrix matrix, and the matrix is defined as the 4*5 arrangement. Well, first of all, take a look at Colormatrixcolorfilter's two constructors:

Public Colormatrixcolorfilter (ColorMatrix matrix) {        mmatrix.set (matrix);        Update ();} Public Colormatrixcolorfilter (float[] array) {        if (Array.Length <) {            throw new ArrayIndexOutOfBoundsException ();        }        Mmatrix.set (array);        Update ();}

One constructor in Colormatrixcolorfilter needs to receive the ColorMatrix object and the other needs to receive a 4*5 float array, and we'll turn on Android studio to track the Mmatrix.set () method, You can see how the set method of the above two constructors is implemented in each of the two

public void set (ColorMatrix src) {        system.arraycopy (src.marray, 0, Marray, 0, 20);} public void set (float[] src) {        system.arraycopy (src, 0, Marray, 0, 20);}

Trace it again. System.arraycopy () Method:

public static void Arraycopy (float[] src, int srcpos, float[] DST, int dstpos, int length)

Well, to here, it is clear that the Colormatrixcolorfilter constructor in the two different parameters received, in fact, the bottom implementation is the same, are also called system.arraycopy () in the same way with the float array parameters. So we don't have to think about how to write a ColorMatrix object passed to Colormatrixcolorfilter, in fact, we use the second constructor, passing a float array, it will appear that the program is more intuitive to understand, So let's try to write a colormatrixcolorfilter, and set it to paint, for example, or use the island flag above!

public class CustomView1 extends View {private Paint mpaint;    Private Context Mcontext;    Public CustomView1 (Context context) {This (context, NULL);        } public CustomView1 (context context, AttributeSet Attrs) {Super (context, attrs);        Mcontext = context;    Initpaint ();        private void Initpaint () {//Initialize paint, and set anti-aliasing.        Mpaint = new Paint (Paint.anti_alias_flag);        Sets the brush style to stroke mpaint.setstyle (Paint.Style.FILL);        Set stroke thickness, in pixels px Note: when Setstrokewidth (0), the stroke width is not 0 but only one pixel mpaint.setstrokewidth (20);        Set the brush color to Custom color Mpaint.setcolor (Color.argb (255, 255, 128, 102));                Colormatrixcolorfilter colorfilter = new Colormatrixcolorfilter (new float[]{1, 0, 0, 0, 0,        0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0});    Mpaint.setcolorfilter (Colorfilter); } @Override protected void OnDraw (canvas canvas) {//Draw a circle, take center point of screen       Canvas.drawcircle (SCREENUTIL.GETSCREENW (Mcontext)/2, SCREENUTIL.GETSCREENH (Mcontext)/2, MPa    int); }}

Look at the above example program, first create a Colormatrixcolorfilter object, and pass in a float-type array of 4*5 arrangement, Then call the Setcolorfilter method of paint to pass in the Colormatrixcolorfilter object, we run on the simulator, duang~~, I go, what changes are not, or the flag of the island. What's going on? It is necessary to study here:

In fact, a 4*5 float array corresponding to the RGBA vector values, the first line represents the R (red) vector value, the second row represents the G (green) vector value, the third row represents B (blue) vector value, the fourth line represents a (transparency) of the vector value, These 4 lines represent different Rgba vector values, and the value range is [0.0F, 2.0F], when the duty is 1.0F, indicating to maintain the original color, does not occur cheap color. So, if we want to change the color of the red circle above, we can't set all the vector values to 1.0F like the code above, and we'll modify one:

Colormatrixcolorfilter colorfilter = new Colormatrixcolorfilter (new float[]{                0.5F, 0, 0, 0, 0,                0, 0.5F, 0, 0, 0,
   0, 0, 0.5F, 0, 0,                0, 0, 0, 1, 0}); Mpaint.setcolorfilter (Colorfilter);

Replace the float array in the above colormatrixcolorfilter with this, and we'll run the program again:

Oh, the color is getting darker, it looks a lot more magical. So what does this color matrix and this float array do? Or how to get another color value after calculation? The following is a plot to illustrate, we top a colormatrix 4*5 float array, and then define a our own mycolor, representing the value of RGBA, respectively:

In fact, the Android system calculates that the color value is derived by multiplying the matrix, as it is. The values of the MyColor here are converted to values between [0,1], and here is how we actually convert the calculations and results.

By the above calculation, we get the final Rgba value is (0.5,0.25,0.2,1), indicating that the RGB color values have been cheap, only a is not offset, and then we multiply these values by 255 and then restore a look, is not the same as the color value of the circle is consistent, okay, don't look, Must certainly be the same. So what's the use of knowing the color matrix? The above simple change of color values, paint class also provides a SetColor () method, directly set the color value up, are TMD convenient, and what the matrix, it appears that their own good + egg pain is not? Explain, the above example is just an example, ah, the real development of the time must be setcolor relatively simple. The problem is, we may be dealing with something that is not a pure color, but always a picture? A picture is a color value of hundreds of thousands of, this time setcolor () can not let them color, or have to use a color matrix to do this thing. Now let's load a picture from the drawable directory!

public class CustomView2 extends View {    private Context mcontext;    Private Paint Mpaint;    Private Bitmap Mbitmap;    private int x, y;    Public CustomView2 (Context context) {This        (context, NULL);    }    Public CustomView2 (context context, AttributeSet Attrs) {        Super (context, attrs);        Mcontext = context;        Initres ();        Initpaint ();    }    private void Initres () {        //get picture        Mbitmap = Bitmapfactory.decoderesource (Mcontext.getresources (), R.mipmap.image);        Get picture display start position        x = Screenutil.getscreenw (mcontext)/2-mbitmap.getwidth ()/2;        y = screenutil.getscreenh (mcontext)/2-mbitmap.getheight ()/2;    }    private void Initpaint () {        mpaint = new Paint (Paint.anti_alias_flag);    }    @Override    protected void OnDraw (canvas canvas) {        Canvas.drawbitmap (mbitmap, x, Y, mpaint);}    }

OK, the picture loading finished, the code is not difficult, the above paint did not do any processing, the following we set the color filter for paint it!

Colormatrixcolorfilter colorfilter = new Colormatrixcolorfilter (new float[]{                0.33F, 0.59F, 0.11F, 0, 0,                0.33F, 0.59F, 0.11F, 0, 0,                0.33F, 0.59F, 0.11F, 0, 0,                0, 0, 0, 1, 0,}); Mpaint.setcolorfilter (Colorfilter);

All right, the picture turns black and white, can setcolor () be done? One More try:

Colormatrixcolorfilter colorfilter = new Colormatrixcolorfilter (new float[]{                1.5F, 1.5F, 1.5F, 0,-1,                1.5F, 1.5F , 1.5F, 0,-1,                1.5F, 1.5F, 1.5F, 0,-1,                0, 0, 0, 1, 0,        }); Mpaint.setcolorfilter (Colorfilter);

This effect is not a bit like negative effect AH! Well, anyway, I don't understand. Image science, Colormatrixcolorfilter want to set what kind of change matrix on the line, in the end, what effect, the value of the effect to be set to how much, I do not know, ask the artist! We are only responsible for writing the program! Hehe ~ ~

Lightingcolorfilter

Lightingcolorfilter as the name implies is the "Light color filter", is to simulate a light shines through the image produced by the effect, the constructor is this:

Public lightingcolorfilter (int mul, int add)

Take a look at Google Docs, here's how:

Light color filters, which can be used to simulate simple lighting effects. A lightingcolorfilter defines two parameters, one for multiplying with the source color (called colormultiply), and one for adding to the source color (known as Coloradd). The alpha channel is an intact color filter. Given the RGB of a source color, the resulting specific color is calculated as follows:

R ' = R * COLORMULTIPLY.R + COLORADD.R
G ' = G * COLORMULTIPLY.G + COLORADD.G
B ' = b * colormultiply.b + coloradd.b
The result range for each channel value is 0~255.

The above introduction to write more clear, the algorithm is very simple, we take the above image as an example, see the Blue sky, we now remove the blue sky. According to this short hair description, we just remove the blue, we have to change the blue channel value, the B is calculated as a different value, this time colormultiply.b = 00,coloradd.b = 00, the calculated B = 00, the other channels R and G are unchanged, then, COLORADD.R=0,COLORADD.G =0;COLORMULTIPLY.R = FF,COLORMULTIPLY.G =ff,alpha channel A is ignored, so whatever you set will not change.

Lightingcolorfilter colorfilter = new Lightingcolorfilter (0xffffff00, 0x00000000); Mpaint.setcolorfilter (ColorFilter );

After running the result, the blue sky is gone.

Porterduffcolorfiltercolorfilter also has the last subclass, Porterduff the mixed-mode color filter, the following is its constructor:

public porterduffcolorfilter (int color, porterduff.mode Mode)

Google Docs: Porterduff filters can be used for point source pixels using a single color and a specific Pottav composite pattern.

The Porterduffcolorfilter constructor is also simple, where the first parameter represents a 16-binary color value, The second parameter is an enumeration value Porterduff.mode, which represents the pattern of picture blending, and there are 16 kinds of porterduff.mode under Android. Now let's write a small example, here we still use the above image, for the original image to add picture mixed mode, the color value is set to Red 0xffff0000, mixed mode set to PorterDuff.Mode.DARKEN.

public class CustomView2 extends View {private Context mcontext;    Private Paint Mpaint;    Private Bitmap Mbitmap;    private int x, y;    Public CustomView2 (Context context) {This (context, NULL);        } public CustomView2 (context context, AttributeSet Attrs) {Super (context, attrs);        Mcontext = context;        Initres ();    Initpaint (); } private void Initres () {//Get picture Mbitmap = Bitmapfactory.decoderesource (Mcontext.getresources (), R.MIPMA        P.image);        Get picture display start position x = Screenutil.getscreenw (mcontext)/2-mbitmap.getwidth ()/2;    y = screenutil.getscreenh (mcontext)/2-mbitmap.getheight ()/2;        } private void Initpaint () {mpaint = new Paint (Paint.anti_alias_flag);        Porterduffcolorfilter colorfilter = new Porterduffcolorfilter (0xffff0000, PorterDuff.Mode.DARKEN);    Mpaint.setcolorfilter (Colorfilter); } @Override protected void OnDraw (canvas canvas) {Canvas.drawbitmap (mbitmap, X, y, mpaint); }}

The picture above is the effect after the operation, the original image is not only turned red, but also dimmed. In fact, here we will porterduffcolorfilter the constructor parameter apart to analyze, first we pass in a red color value 0xffff0000, here is equivalent to create a new layer, the color of the layer is 0xffff0000, And our original image can be regarded as the second layer, we first put together these 2 images, we will find a very red image on the original picture, and then we look at Porterduff.mode is the darken mode, said before the "original + very red" Image, the color is further darkened and the image shown above is finally obtained.

About the Porterduff.mode,android system provides 18 kinds of mixed mode, in the simulator of the apidemos/graphics/xfermodes, there are Zhang:

This image can be a very vivid description of the image of various mixed-mode effects. where SRC represents the original picture, DST represents the target graph, and the two images use different blending methods after the resulting image is as shown. Porterduff.mode also offers 18 kinds of mixed-mode algorithms, which are more than two modes of add and overlay:

Where SA is all known as source Alpha represents the alpha channel of the origin graph; SC is all called source color, which represents the color of the origin graph; Da is all called destination Alpha represents the alpha channel of the target graph; DC is all called destination Color indicates the colors of the target graph, [...,..] The first half calculates the alpha channel value of the resulting image, and the second half calculates the color value of the resulting image. After the image is mixed with these two values to recalculate the ARGB value, the specific calculation algorithm, sorry, I do not know, but it does not matter, do not understand the calculation algorithm does not affect our programmer to write programs. We can infer the results of the mixed rows by comparing the images provided in the above Apidemo, the following is a description of the Chinese language found on the internet, thanks to the author's summary.

1.porterduff.mode.clear
The drawing is not submitted to the canvas.
2.porterduff.mode.src
Show Top Draw picture
3.PORTERDUFF.MODE.DST
Show Lower drawing pictures
4.porterduff.mode.src_over
Normal drawing shows that the upper and lower layers are drawn with overlapping covers.
5.porterduff.mode.dst_over
The upper and lower layers are displayed. The lower level is shown on the home.
6.porterduff.mode.src_in
Draw the intersection of two layers. Displays the upper layer.
7.porterduff.mode.dst_in
Draw the intersection of two layers. Displays the lower layer.
8.porterduff.mode.src_out
Draw the non-intersecting portion of the upper layer.
9.porterduff.mode.dst_out
Remove the layer to draw the non-intersecting part.
10.porterduff.mode.src_atop
Remove the non-intersecting part of the layer from the upper intersection section
11.porterduff.mode.dst_atop
Take the upper non-intersecting part and the lower part of the intersection
12.porterduff.mode.xor
XOR: Remove the two Layer intersection section
13.porterduff.mode.darken
Take two layers of all areas, the intersection part of the color deepened
14.porterduff.mode.lighten
Take two layers all, light the intersection part color
15.porterduff.mode.multiply
Take two layer intersection part overlay color
16.porterduff.mode.screen
Take two layers of all areas, the intersection part becomes transparent color

About Colorfilter, at present I learned these, now also summarizes these content bar, welcome everybody to discuss the study together. In addition the picture mixed pattern really is very important, understands it is also very necessary, therefore I will continue to study. Picture mixed pattern in colorfilter use is not a lot, and in Xfermode will and frequently used to, next, I will own for Xfermode of learning summary.

Android image processing--paint Colorfilter