【Android 应用开发】Paint 滤镜颜色矩阵应用 ( 颜色矩阵使用流程 | 颜色通道值翻倍 | 颜色通道值增加 | 颜色反转 | 底片效果 | 黑白效果 | 复古效果 | 美颜效果 )

韩曙亮

发布于 2023-03-27 17:25:55

1.2K0

发布于 2023-03-27 17:25:55

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

Paint 滤镜简单流程

Paint 滤镜简单流程 :

1.写出矩阵数组 : 根据

4\times5

颜色矩阵 ( 4 行 5 列矩阵 ) 写出对应的 float 数组 ( 20个元素 ) ;

		new float[]{
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0,  0,  0,  1,  0,
		}

2.创建颜色矩阵: 传入 float 数组 , 创建颜色矩阵 ;

        ColorMatrix matrix = new ColorMatrix(new float[]{
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0,  0,  0,  1,  0,
        });

3.创建滤镜 : 根据颜色矩阵 , 创建颜色滤镜 ;

        ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);

4.为画笔设置颜色滤镜 : 直接调用 Paint 画笔的 setColorFilter 方法设置 ;

        paint.setColorFilter(filter);

之后可以使用画笔进行绘制 ;

Paint 滤镜详细流程

Paint 滤镜使用流程 :

1.使用前提 : 滤镜是要设置给 Paint 对象 , 因此必须在自定义的 View 或 SurfaceView 中使用 Canvas 绘制才能设置滤镜 ;
2.写出矩阵数组 : 根据

4\times5

颜色矩阵 ( 4 行 5 列矩阵 ) 写出对应的 float 数组 ( 20个元素 ) ;

		new float[]{
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0,  0,  0,  1,  0,
		}

3.创建颜色矩阵 ColorMatrix : 设置一个

4\times5

的矩阵 , 在 Java 代码中使用一个 20个元素 float[] 数组表示 ;

① 下面的数组对应矩阵 :

M=\begin{pmatrix} 0.213& 0.715& 0.072&0& 0 \\ 0.213& 0.715& 0.072&0& 0 \\ 0.213& 0.715& 0.072&0& 0 \\ 0&0& 0& 1&0 \\ \end{pmatrix}

② 数组与矩阵对应关系 : 第 0 ~ 4 个元素代表矩阵第 1 行元素 , 以此类推 , 第 15 ~ 19 个元素代表矩阵第 4 行元素 ;

        ColorMatrix matrix = new ColorMatrix(new float[]{
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0,  0,  0,  1,  0,
        });

4.创建颜色滤镜 ColorMatrixColorFilter : 根据颜色矩阵 ColorMatrix 创建颜色滤镜 ColorMatrixColorFilter ;

	ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);

5.创建 Paint 画笔 : 创建时传入 Paint.ANTI_ALIAS_FLAG 参数 , 表示打开抗锯齿 ;

    /**
     * 设置滤镜时的画笔
     */
    private Paint paint;
	paint = new Paint(Paint.ANTI_ALIAS_FLAG);

6.为 Paint 画笔设置滤镜 : 将上面根据颜色矩阵创建的颜色滤镜 , 设置给 Paint 画笔 ;

	paint.setColorFilter(filter);

7.加载图像资源 :

    private Bitmap bitmap;
    bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.trump);

8.设置绘制区域 : 设置左上右下坐标 ;

    RectF rectF = new RectF(0,0,getWidth(), getHeight());

9.绘制图像 : 直接调用 Canvas 的 draw 方法绘制图像 ;

   canvas.drawBitmap(bitmap, null , rectF, paint);

10.滤镜使用完整代码 : 下面代码是一个自定义 View , 在 onDraw 方法中实现上述逻辑 , 不用的滤镜就是使用不同的 ColorMatrix 矩阵 ;

package net.csdn.blog.hanshuliang.filter;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * 滤镜示例 : 黑白照片效果
 *
 *          将 RGBA 某个通道的值翻倍 , 即将对应的颜色矩阵值设置成对应的倍数
 *           第 1 行 第 1 列 : R ( Red ) , 红色通道倍数 ;
 *           第 2 行 第 2 列 : G ( Green ) , 绿色通道倍数 ;
 *           第 3 行 第 3 列 : B ( Blue ) , 蓝色通道倍数 ;
 *           第 4 行 第 4 列 : A ( Alpha ) , 透明度通道倍数 ;
 *
 *          通道增量 :
 *           第 1 行 第 1 列 : R ( Red ) , 红色通道倍数 ;
 *           第 2 行 第 2 列 : G ( Green ) , 绿色通道倍数 ;
 *           第 3 行 第 3 列 : B ( Blue ) , 蓝色通道倍数 ;
 *           第 4 行 第 4 列 : A ( Alpha ) , 透明度通道倍数 ;
 *
 */
public class PaintFilterE extends View {

    /**
     * 设置滤镜时的画笔
     */
    private Paint paint;

    /**
     * 使用滤镜处理的图像
     */
    private Bitmap bitmap;

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

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

        // 创建画笔 , 并打开抗锯齿
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        // 加载图像资源
        bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.trump);
    }

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

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

        // ① 设置颜色矩阵 , 黑白照片效果
        ColorMatrix matrix = new ColorMatrix(new float[]{
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0,  0,  0,  1,  0,
        });

        // ② 根据颜色矩阵创建滤镜
        ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);

        // ③ 绘制区域
        RectF rectF = new RectF(0,0,getWidth(), getHeight());
        // ④ 设置滤镜
        paint.setColorFilter(filter);

        // ⑤ 绘制经过滤镜处理的图片
        canvas.drawBitmap(bitmap, null , rectF, paint);

    }
}

红色通道翻倍

① 颜色矩阵代码 :

        // ① 设置颜色矩阵 , 该矩阵将 红色通道的值 翻倍
        ColorMatrix matrix = new ColorMatrix(new float[]{
                2,  0,  0,  0,  0,
                0,  1,  0,  0,  0,
                0,  0,  1,  0,  0,
                0,  0,  0,  1,  0,
        });

红色通道增加30

① 颜色矩阵代码 :

        // ① 设置颜色矩阵 , 该矩阵将 红色通道的值 增加 30
        ColorMatrix matrix = new ColorMatrix(new float[]{
                1,  0,  0,  0,  30,
                0,  1,  0,  0,  0,
                0,  0,  1,  0,  0,
                0,  0,  0,  1,  0,
        });

底片效果

① 颜色矩阵代码 :

        // ① 设置颜色矩阵 , 底片效果
        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,
        });

红绿通道交换效果

① 颜色矩阵代码 :

        // ① 设置颜色矩阵 , 该矩阵将 红色 和 蓝色通道交换
        ColorMatrix matrix = new ColorMatrix(new float[]{
                0,  1,  0,  0,  0,
                1,  0,  0,  0,  0,
                0,  0,  1,  0,  0,
                0,  0,  0,  1,  0,
        });

黑白照片效果

① 颜色矩阵代码 :

        // ① 设置颜色矩阵 , 黑白照片效果
        ColorMatrix matrix = new ColorMatrix(new float[]{
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0.213f,  0.715f,  0.072f,  0,  0,
                0,  0,  0,  1,  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,  1,  0,
        });

美颜效果

① 颜色矩阵代码 :

        // ① 设置颜色矩阵 , 美颜效果
        ColorMatrix matrix = new ColorMatrix(new float[]{
                1.3f,  0,  0,  0,  0,
                0,  1.3f,  0,  0,  0,
                0,  0,  1.3f,  0,  0,
                0,  0,  0,  1,  0,
        });

相关代码地址 :