Android advanced UI7 filter effects and color channel filtering

Filter effect: certain filtering processing of the image. Use Paint to set the filter effect

1.MaskFilter MaskFilter processing

(1) BlurMaskFilter

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);


        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);

        canvas.drawBitmap(bitmap,null.new RectF(0.0.400.400*bitmap.getHeight()/bitmap.getWidth()),paint);

        canvas.translate(400.0);

        NORMAL * Blur.SOLID * Blur.OUTER * Blur.INNER */
        paint.setMaskFilter(new BlurMaskFilter(50,Blur.NORMAL));
        canvas.drawBitmap(bitmap,null.new RectF(0.0.400.400*bitmap.getHeight()/bitmap.getWidth()),paint); }}Copy the code

(2) Embossed mask filter (EmbossMaskFilter)

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);


        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);

        canvas.drawBitmap(bitmap,null.new RectF(0.0.400.400*bitmap.getHeight()/bitmap.getWidth()),paint);

        canvas.translate(400.0);


        ** * direction, an array of scalar [x,y,z] with length XXX that specifies the location of the light source ** ambient, specifies the ambient background light source (0~1) * specular, specifies the specular reflection coefficient * blurRadius, specifies the blurRadius */
       paint.setMaskFilter(new EmbossMaskFilter(new float[] {400.300.100},0.5 f.60.100 ));
        canvas.drawBitmap(bitmap,null.new RectF(0.0.400.400*bitmap.getHeight()/bitmap.getWidth()),paint); }}Copy the code

2. Color RGB filter processing

All the effects of the filter are achieved through the transformation of the color matrix. For example: special effects achieved by beauty camera (highlights, retro, black and white)\

(1) What is a matrix? Suppose the matrix A is of size MN and the matrix B is of size NP, C=AB\

Here is an example \

The matrix multiplication here requires that the number of rows of one matrix is equal to the number of columns of the other matrix, otherwise, you can’t take the chance.

(2) Filter red and green in an image and color block through matrix transformation (leaving only blue)

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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


        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
        canvas.drawBitmap(bitmap,null.new RectF(0.0.400.400*bitmap.getHeight()/bitmap.getWidth()),paint);
        canvas.translate(400.0);
        ColorMatrix matrix = new ColorMatrix(new float[] {0.0.0.0.0.0.0.0.0.0.0.0.1.0.0.0.0.0.1.0});// Set the color filter
        paint.setColorFilter(new ColorMatrixColorFilter(matrix));
        canvas.drawBitmap(bitmap,null.new RectF(0.0.400.400*bitmap.getHeight()/bitmap.getWidth()),paint); }}Copy the code

(3) color operation 1. Color translation operation (addition operation) 2. Color scaling operation (multiplication operation)

Inverting effect (similar to exposure)

Original: RGB = 100,200,250 reversed: RGB = 155,55,5

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.argb(255.200.100.100));
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);

        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400 * bitmap.getHeight() / bitmap.getWidth()), paint);

        canvas.translate(400.0);

        /** * transparency does not invert */
        ColorMatrix matrix = new ColorMatrix(new float[]{
                -1.0.0.0.255.0, -1.0.0.255.0.0, -1.0.255.0.0.0.1.0});// Set the color filter
        paint.setColorFilter(new ColorMatrixColorFilter(matrix));
        canvas.drawRect(0.0.400.400, paint);
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400* bitmap.getHeight() / bitmap.getWidth()), paint); }}Copy the code

Color enhancement (lightening effect)

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.argb(255.200.100.100));
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);

        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400 * bitmap.getHeight() / bitmap.getWidth()), paint);

        canvas.translate(400.0);

        /** * transparency does not invert */
        ColorMatrix matrix = 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});// Set the color filter
        paint.setColorFilter(new ColorMatrixColorFilter(matrix));
        canvas.drawRect(0.0.400.400, paint);
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400* bitmap.getHeight() / bitmap.getWidth()), paint); }}Copy the code

Image black and white effect

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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


        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
        canvas.drawBitmap(bitmap,null.new RectF(0.0.400.400*bitmap.getHeight()/bitmap.getWidth()),paint);
        canvas.translate(400.0);
        /** * Color removal principle: as long as the RGB three channel color information set to the same, that is: R=G=B * then the image becomes gray, and, in order to ensure the image brightness unchanged, * in the same channel R+G+B=1; Such as 0.213 + 0.175 + 0.072 = 1; * RGB=0.213,0.175,0.072 * The three numbers are calculated according to the frequency of color light wave and color psychology */
        ColorMatrix matrix = 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});// Set the color filter
        paint.setColorFilter(new ColorMatrixColorFilter(matrix));
        canvas.drawBitmap(bitmap,null.new RectF(0.0.400.400*bitmap.getHeight()/bitmap.getWidth()),paint); }}Copy the code

---

    final float R = 0.213 f * invSat;
    final float G = 0.715 f * invSat;
    final float B = 0.072 f * invSat;
Copy the code

The effect of color

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400 * bitmap.getHeight() / bitmap.getWidth()), paint);
        canvas.translate(400.0);

        // Invert effect
        ColorMatrix matrix = new ColorMatrix(new float[] {0.1f.0.0.0.1f.0.0.0.0.0.0.1f.0.0.0.0.0.1f.0});// Set the color filter
        paint.setColorFilter(new ColorMatrixColorFilter(matrix));
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400* bitmap.getHeight() / bitmap.getWidth()), paint); }}Copy the code

Style restoring ancient ways

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400 * bitmap.getHeight() / bitmap.getWidth()), paint);
        canvas.translate(400.0);

        ColorMatrix matrix = 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.1f.0});// Set the color filter
        paint.setColorFilter(new ColorMatrixColorFilter(matrix));
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400* bitmap.getHeight() / bitmap.getWidth()), paint); }}Copy the code

3. ColorMatrix API

3.1ColorMatrix construction method

---

   ColorMatrix matrix = 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.1f.0});Copy the code

---

ColorMatrix matrix = new ColorMatrix();
matrix.set(src);
Copy the code

3.2 Set the color scale function setScale(Lighten or darken color)

---

 // The color becomes lighter or darker
 matrix.setScale(1.1.1.4 f.1);
Copy the code

Source:

---

    /** * Set this colormatrix to scale by the specified values. */
    public void setScale(float rScale, float gScale, float bScale,
                         float aScale) {
        final float[] a = mArray;

        for (int i = 19; i > 0; --i) {
            a[i] = 0;
        }
        a[0] = rScale;
        a[6] = gScale;
        a[12] = bScale;
        a[18] = aScale;
    }
Copy the code

3.3 Set the saturation of colors setSaturation

Source:

---

    public void setSaturation(float sat) {
        reset();
        float[] m = mArray;

        final float invSat = 1 - sat;
        final float R = 0.213 f * invSat;
        final float G = 0.715 f * invSat;
        final float B = 0.072 f * 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

// Saturation Settings (0: gray 0 ~ 1 saturation decreased 1. Original unchanged >1 saturation increased) example:

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400 * bitmap.getHeight() / bitmap.getWidth()), paint);
        canvas.translate(400.0);
        ColorMatrix matrix = new ColorMatrix();
        // The color becomes lighter or darker
        / / matrix. SetScale (,1,1.4 f 1, 1);

        matrix.setSaturation(1.8 f);

        // Set the color filter
        paint.setColorFilter(new ColorMatrixColorFilter(matrix));
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400* bitmap.getHeight() / bitmap.getWidth()), paint); }}Copy the code

Matrix. SetSaturation (1.8 f); Increased saturation

3.4 Color rotation function setRotate

Parameter axis, which axis rotates, 0, 1, 2 (0 does not change about the red axis, G and B change) (1 does not change about the green axis, G and B change) (2 does not change about the blue axis, R and G change) parameter degrees: The number of rotation degrees

---

    /** * Set the rotation on a color axis by the specified values. * 
 * axis=0 correspond to a rotation around the RED color * axis=1 correspond to a rotation around the GREEN color * axis=2 correspond to a rotation around the BLUE color * 
 */
    public void setRotate(int axis, float degrees) {
        reset();
        double radians = degrees * Math.PI / 180d;
        float cosine = (float) Math.cos(radians);
        float sine = (float) Math.sin(radians);
        switch (axis) {
        // Rotation around the red color
        case 0:
            mArray[6] = mArray[12] = cosine;
            mArray[7] = sine;
            mArray[11] = -sine;
            break;
        // Rotation around the green color
        case 1:
            mArray[0] = mArray[12] = cosine;
            mArray[2] = -sine;
            mArray[10] = sine;
            break;
        // Rotation around the blue color
        case 2:
            mArray[0] = mArray[6] = cosine;
            mArray[1] = sine;
            mArray[5] = -sine;
            break;
        default:
            throw newRuntimeException(); }}Copy the code

---

public class MaskFilterView extends View {

    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400 * bitmap.getHeight() / bitmap.getWidth()), paint);
        canvas.translate(400.0); [cross on the picture... (WeChat66f51a0be417603f2969ad62c592c06e. PNG b9aa68 -1550653211087-0)]

        ColorMatrix matrix = new ColorMatrix();
        /** ** axis, which axis is rotated, 0, 1 * (0 does not change about the red axis, G and B change) * (1 does not change about the green axis, G and B change) * (2 does not change about the blue axis, R and G change) ** The number of degrees rotated **/
        matrix.setRotate(0.90);

        // Set the color filter
        paint.setColorFilter(new ColorMatrixColorFilter(matrix));
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400* bitmap.getHeight() / bitmap.getWidth()), paint); }}Copy the code

4. Subclasses used by ColorFilter

4.1 ColorMatrixColorFilter: color matrix of color filter

4.2LightingColorFilter: Method of filtering and enhancing colors (Light color filter)

---

public class MaskFilterView extends View {
    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400 * bitmap.getHeight() / bitmap.getWidth()), paint);
        canvas.translate(400.0);



        /** * mul, multiply multiply -- zoom * add, add -- pan */
        paint.setColorFilter(new LightingColorFilter(0x00ff00.0xff0000));
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400* bitmap.getHeight() / bitmap.getWidth()), paint); }}Copy the code

4.3PorterDuffColorFilter Mixed filter

---

public class MaskFilterView extends View {


    public MaskFilterView(Context context) {
        super(context);
    }

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

    public MaskFilterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        // Hardware acceleration needs to be turned off.
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400 * bitmap.getHeight() / bitmap.getWidth()), paint);
        canvas.translate(400.0);

        /** * color: * mode: */
        paint.setColorFilter(new PorterDuffColorFilter(Color.RED, Mode.MULTIPLY));
        canvas.drawBitmap(bitmap, null.new RectF(0.0.400.400* bitmap.getHeight() / bitmap.getWidth()), paint); }}Copy the code

Read more about Android in the card below