paint's Color Matrix and Filter Effect

Color matrix

For color storage, the Bitmap class uses a 32-bit value to store. Red, green, blue and transparent each occupy 8 places, and the value range of each color component is 0-255. Transparency of 0 means complete transparency and 255 means complete visibility.

1. Matrix representation of color information:
Fourth-order representation:
Since a color information contains R, G, B and Alpha information, we must use a fourth-order color transformation matrix to modify each component value of color:

Note: For the color transformation matrix, the color order here is R, G, B, A instead of A, R, G, B!!!
If you want to change the color (0, 255, 0, 255) to translucent, you can use the following matrix operation to express:

Why Use Fifth-Order Matrix
Fourth-order matrix can change the value of RGBA, but if we want to add a value on a component or other operations, this is not a fourth-order matrix can be solved, then we need a fifth-order matrix, more first-order for translation operations.
The following is a transformation requirement: 1. The red component value is doubled and the green component value is increased by 100 on the original basis. The matrix transformation is as follows:

Matrix in Android

1. briefly
The color matrix in Android is represented by the ColorMatrics class in the following ways:

// Generating Color Matrix    
ColorMatrix colorMatrix = new ColorMatrix(new float[]{    
        1, 0, 0, 0, 0,    
        0, 1, 0, 0, 0,    
        0, 0, 1, 0, 0,    
        0, 0, 0, 0.5, 0,    
});    
mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));  

2. Example 1 (blue channel of single color)

public class MyView8 extends View {

    private Paint paint;

    public MyView8(Context context) {
        super(context);
        init();
    }

    public MyView8(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public void init()
    {
        paint=new Paint();
        paint.setARGB(255,200,100,100);
        paint.setAntiAlias(true);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        //super.onDraw(canvas);

        canvas.drawRect(0,0,500,500,paint);
        canvas.translate(550,0);

        // Generating Color Matrix
        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.drawRect(0,0,500,500,paint);

    }
}

The results are as follows:

2. Example 2 (Blue Channel with Multicolored Pictures)

public class MyView8 extends View {

    private Paint paint;
    private Bitmap bitmap;
    private Context context;

    public MyView8(Context context) {
        super(context);
        this.context=context;
        init();
    }

    public MyView8(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        init();
    }

    public void init()
    {
        paint=new Paint();
        paint.setARGB(255,200,100,100);
        paint.setAntiAlias(true);
        bitmap= BitmapFactory.decodeResource(context.getResources(),R.mipmap.banner_picture02);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        //super.onDraw(canvas);

        // Draw the original bitmap
        canvas.drawBitmap(bitmap, null, new Rect(0, 0, 500, 500 * bitmap.getHeight() / bitmap.getWidth()),paint);

        canvas.translate(510, 0);
        // Generating Color Matrix
        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, null, new Rect(0, 0, 500, 500 * bitmap.getHeight() / bitmap.getWidth()),paint);
    }
}

The results are as follows:

Keywords: Android

Added by pablodelapena on Mon, 27 May 2019 23:16:30 +0300