Android custom View series

  • Android custom View Paint draws text and lines
  • Android custom View Precautions
  • Canvas for Android custom View
  • Android custom View image shape effects – easy to achieve rounded corners and round images
  • Android custom View dual buffering mechanism and SurfaceView
  • Android custom View invalidate method and postInvalidate method
  • Android custom View Window, View View PL and View of the three processes
  • Android custom View requestLayout method and invalidate method

Paint and Canvas provide rich apis that make it easy to draw your own graphics. In addition to drawing text and simple graphics, Paint and Canvas have some advanced features, such as changing the color and shape of images. Today we are going to look at how to change the color of an image using Paint and Canvas.

Change the color of the picture

We need new apis for Paint and Canvas

  • Paint Sets color filtering
paint.setColorFilter(new ColorMatrixColorFilter(ColorMatrix matrix)
Copy the code
  • Canvas draw the Bitmap
canvas.drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint)
Copy the code

Here’s something new: ColorMatrix

ColorMatrix

ColorMatrix changes the principle of color
  • ColorMatrix: ColorMatrix is a class in the Android.graphics package that handles the colors of images.
  • It is a 4 by 5 numeric matrix that uses a one-dimensional array to hold the values in the storage matrix.
  • For each pixel there is a color component matrix that holds the RGBA value of the color

Color matrix


The color component matrix corresponds to the RGBA value for each pixel


The color matrix is applied to the color component matrix of the pixel, that is, two matrices for multiplication

R1 = a*R + b*G + c*B + d*A + e
G1 = f*R + g*G + h*B + i*A + j;
B1 = k*R + l*G + m*B + n*A + o;
A1 = p*R + q*G + r*B + s*A + t;
Copy the code

The matrix multiplied by the above two matrices is the new RGBA value of a pixel, which becomes R1G1B1A1, so we can change the color value of the pixel simply by changing the value of the elements in the color matrix.

In particular, when our color matrix is:


The RGBA value of the pixels does not change, so the matrix A0 is usually used as the initial color matrix.

Common API of ColorMatrix

Generally, we deal with the color of the image from the three aspects of hue, saturation and brightness. The ColorMatrix class in the Android system has encapsulated the corresponding API for us

  • Change tone: setRotate(int Axis, float degrees)
// hueMatrix = new ColorMatrix(); //0 indicates the processing of Red huematrix.setrotate (0, hue); //1 indicates the processing of Green huematrix.setrotate (1, hue); //2 indicates the processing of Blue huematrix.setrotate (2, hue);Copy the code
  • Change saturation: setSaturation(float sat)
// saturationMatrix = new ColorMatrix(); saturationMatrix.setSaturation(saturation);Copy the code
  • Change brightness: setScale(float rScale, float gScale, float bScale, float aScale)
// ColorMatrix lumMatrix = new ColorMatrix(); lumMatrix.setScale(lum, lum, lum, 1);Copy the code
  • Blend several matrix effects: postConcat(ColorMatrix postmatrix)
ColorMatrix bitmapMatrix = new ColorMatrix(); bitmapMatrix.postConcat(hueMatrix); bitmapMatrix.postConcat(saturationMatrix); bitmapMatrix.postConcat(lumMatrix);Copy the code

Actual combat: get grayscale pictures

Daily development will inevitably use grayscale pictures, let’s see how to use today’s learning to achieve.

Grayscale image is actually very simple, the image saturation is 0.

(1) Get the picture first

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ant);
Copy the code

(2) After we get the picture we are going to gray processing, here directly reduce the saturation to 0 on the line

// saturationMatrix = new ColorMatrix(); saturationMatrix.setSaturation(0);Copy the code

(3) Then call Paint and Canvas to redraw

Bitmap bitmap = Bitmap.createBitmap(bp.getWidth(), bp.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();

paint.setColorFilter(new ColorMatrixColorFilter(saturationMatrix));
canvas.drawBitmap(bp, 0, 0, paint);
Copy the code

(4) Finally, set the newly obtained Bitmap to the ImageView

imageView.setImageBitmap(bitmap);
Copy the code

Of course, we can also directly create a color matrix using a one-dimensional array of length 20, and change the values of the elements of the one-dimensional array to control the color more carefully

For example, the one-dimensional array of grayscale images is:

private static final floatF [] GREY = {0.33, 0.59 f to 0.11 f, 0,0,0.33 f, f 0.59, 0.11 f, 0,0,0.33 f, f 0.59, 0.11 f, 0,0,0,0,0,1,0};Copy the code

The code for the grayscale image becomes the following

ColorMatrix bitmapMatrix = new ColorMatrix();
bitmapMatrix.set(GREY);

Bitmap bitmap = Bitmap.createBitmap(bp.getWidth(), bp.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();

paint.setColorFilter(new ColorMatrixColorFilter(bitmapMatrix));
canvas.drawBitmap(bp, 0, 0, paint);

Copy the code

In fact, we can find that the principle of the above two ways is the same, but ColorMatrix provides us with API convenient for us to use, rather than to maintain a one-dimensional array every time

//ColorMatrix.class
public void setSaturation(float sat) {
    reset();
    float[] m = mArray;

    final float invSat = 1 - sat;
    final float R = 0.213f * invSat;
    final float G = 0.715f * invSat;
    final float B = 0.072f * invSat;

    m[0] = R + sat; m[1] = G;       m[2] = B;
    m[5] = R;       m[6] = G + sat; m[7] = B;
    m[10] = R;      m[11] = G;      m[12] = B + sat;
}
Copy the code

It should be noted that the same grayscale picture, the degree of grayscale can also be different, if the requirements are higher, you can fine tune, but generally not.

Other special color effect processing

People who study image color processing apply the color matrix to the original image through different algorithms, so as to get the image of new color. Here are a few common color effect matrices

(1) Gray effect

private static final floatF [] GREY = {0.33, 0.59 f to 0.11 f, 0,0,0.33 f, f 0.59, 0.11 f, 0,0,0.33 f, f 0.59, 0.11 f, 0,0,0,0,0,1,0};Copy the code

(2) the effect of image inversion

private static final float[] REVERSAL = {1 f, 0 f, 0 f, 1, 0 f, 1 f, 0 f, 1, 0 f, 0 f, 1 f, 1,1,0,0,0,1,0};Copy the code

(3) color removal effect

private static final floatF [] DECOLORATION = {1.5, 1.5 f to 1.5 f, 0, 1,1.5 f, f 1.5, 1.5 f, 0, 1,1.5 f, f 1.5, 1.5 f, 0, 1,0,0,0,1,0};Copy the code

conclusion

  • In Android, the ColorMatrix ColorMatrix is used to control the color of the image, and ColorMatrix is used to change the color by RGBA acting on the pixel
  • ColorMatrix provides common apis for controlling color, saturation, and brightness
  • Android does not allow you to change the original image directly, so we need to create a new Bitmap from the original image and create the Canvas from the new Bitmap
  • The setColorFilter method of Paint is used to apply the ColorMatrix to the drawing process of the image
  • Finally, the new Bitmap is obtained through the drawBitmap method of Canvas. It should be noted that the new Bitmap is used to create Canvas while the original Bitmap object is passed in the drawBitmap method. Make no mistake

Welcome to follow my wechat public number, and make progress with me every day!