preface

In this post, we’ll talk about bitmap-related rendering and color filters

  • Android Custom View directory

Bitmapdraw

There are four methods for drawing Bitmap, of which 2 and 3 can be said to be the same

drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

drawBitmap(Bitmap bitmap, Rect src, RectF dst,Paint paint)

drawBitmap(Bitmap bitmap, Rect src, Rect dst,Paint paint)

drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

  • drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

Where, left and top are the coordinates of the upper left corner of the starting point

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(3);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.woman);
        // The top left coordinates left,top
        canvas.drawBitmap(bitmap, 100.100, paint);
Copy the code

  • drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)

Where, SRC draws the original region, DST draws the target region, in simple terms, is to draw the SRC region image to the DST region

        Rect rectF = new Rect(100.300.300.100);

        canvas.drawRect(rectF, paint);
        canvas.drawBitmap(bitmap, null, rectF, paint);
        Rect dst = new Rect(0.0.300.300);
        Rect src = new Rect(0.0, bitmap.getWidth() / 2, bitmap.getHeight() / 2);

        canvas.drawRect(src, paint);
        // SRC Original area DST Target area drawn this time
        canvas.drawBitmap(bitmap, src, dst, paint);

        canvas.drawBitmap(bitmap, 0, bitmap.getHeight() / 2, paint);
Copy the code

  • drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

Where, matrix is the matrix, which can carry out some simple processing on the image

        Matrix matrix = new Matrix();
/ / / / zoom
        matrix.setScale(0.5 f.0.5 f);
/ / / / translation
// matrix.setTranslate(100, 100);
/ / / / rotate
// matrix.setRotate(30);
/ / / / tilt
/ / matrix. SetSkew (0.5 0.5 f, f);

//
        canvas.drawBitmap(bitmap, matrix, paint);
Copy the code

ColorFilterColor filter

First, the Bitmap class uses a 32-bit value to store colors. Red (R), green (G), blue (B), and transparency (A) are 8 bits each, known as RGBA, and each color component ranges from 0 to 255. Transparency 0 means full transparency, and 255 means full visibility.

The Color Matrix in Android is a 4×5 numeric matrix that is used to manipulate the colors of images.

R1 = aR + bG + cB + dA + e;
G1 = fR + gG + hB + iA + j;
B1 = kR + lG + mB + nA + o;
A1 = pR + qG + rB + sA + t;
Copy the code

This also explains why it’s hard to do this with a fifth order matrix, for example, just adding some offsets to R, with a fourth order matrix. (Fourth order matrices can only do multiplication.) Let’s take a look at some examples

Blue pattern

Get rid of the red and green

        ColorMatrix colorMatrix = new ColorMatrix(new float[] {0.0.0.0.0.0.0.0.0.0.0.0.1.0.0.0.0.0.1.0}); paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        canvas.drawBitmap(bitmap, 400.0, paint);
Copy the code

Reverse phase

        / / reverse phase
        ColorMatrix colorMatrix = new ColorMatrix(new float[]{
                -1.0.0.0.255.0, -1.0.0.255.0.0, -1.0.255.0.0.0.1.0}); paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        canvas.drawBitmap(bitmap, 400.0, paint);
Copy the code

brighten

It increases both R, G, B, and A

        / / gets brighter
        ColorMatrix light = new ColorMatrix(new float[] {1.2 f.0.0.0.0.0.1.2 f.0.0.0.0.0.1.2 f.0.0.0.0.0.1.2 f.0}); paint.setColorFilter(new ColorMatrixColorFilter(light));
        canvas.drawBitmap(bitmap, 400.0, paint);
Copy the code

Grayscale/decolorization

As long as the RGB color information is set to the same; That is: R = G = B, then the image becomes gray

        / / gray
        ColorMatrix grey1 = new ColorMatrix(new float[] {0.33 f.0.59 f.0.11 f.0.0.0.33 f.0.59 f.0.11 f.0.0.0.33 f.0.59 f.0.11 f.0.0.0.0.0.1.0}); paint.setColorFilter(new ColorMatrixColorFilter(grey1));

        canvas.drawBitmap(bitmap, 400.0, paint);
Copy the code

        / / gray level 2
        ColorMatrix grey2 = new ColorMatrix(new float[] {0.213 f.0.715 f.0.072 f.0.0.0.213 f.0.715 f.0.072 f.0.0.0.213 f.0.715 f.0.072 f.0.0.0.0.0.1.0}); paint.setColorFilter(new ColorMatrixColorFilter(grey2));

        canvas.drawBitmap(bitmap, 400.0, paint);
Copy the code

Red and green color

        // The color is red and green
        ColorMatrix rtog = new ColorMatrix(new float[] {0.1.0.0.0.1.0.0.0.0.0.0.1.0.0.0.0.0.1.0}); paint.setColorFilter(new ColorMatrixColorFilter(rtog));
Copy the code

Getting old

        / / get old
        ColorMatrix old = 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
        });


        paint.setColorFilter(new ColorMatrixColorFilter(old));

        canvas.drawBitmap(bitmap, 400.0, paint);
Copy the code

powdery

 / / powder
        ColorMatrix pink = new ColorMatrix(new float[] {0.8 f.0.0.0.0.0.0.8 f.0.0.0.0.0.7 f.0.7 f.0.0.0.0.0.0.8 f.0}); paint.setColorFilter(new ColorMatrixColorFilter(pink));

        canvas.drawBitmap(bitmap, 400.0, paint);
Copy the code

Your recognition is the motivation for me to keep updating my blog. If it is useful, please give me a thumbs-up. Thank you