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

2023-03-27 17:25:55 浏览数 (1)

文章目录

        • Paint 滤镜简单流程
        • Paint 滤镜详细流程
        • 红色通道翻倍
        • 红色通道增加30
        • 底片效果
        • 红绿通道交换效果
        • 黑白照片效果
        • 复古效果
        • 美颜效果
Paint 滤镜简单流程

Paint 滤镜简单流程 :

  • 1.写出矩阵数组 : 根据
4times5

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

代码语言：javascript复制
		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 数组 , 创建颜色矩阵 ;
代码语言：javascript复制
        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.创建滤镜 : 根据颜色矩阵 , 创建颜色滤镜 ;
代码语言：javascript复制
        ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);
  • 4.为画笔设置颜色滤镜 : 直接调用 Paint 画笔的 setColorFilter 方法设置 ;
代码语言：javascript复制
        paint.setColorFilter(filter);

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

Paint 滤镜详细流程

Paint 滤镜使用流程 :

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

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

代码语言：javascript复制
		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 : 设置一个
4times5

的矩阵 , 在 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 行 元素 ;

代码语言：javascript复制
        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 ;
代码语言：javascript复制
	ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);
  • 5.创建 Paint 画笔 : 创建时传入 Paint.ANTI_ALIAS_FLAG 参数 , 表示打开抗锯齿 ;
代码语言：javascript复制
    /**
     * 设置滤镜时的画笔
     */
    private Paint paint;
	paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  • 6.为 Paint 画笔设置滤镜 : 将上面根据颜色矩阵创建的颜色滤镜 , 设置给 Paint 画笔 ;
代码语言：javascript复制
	paint.setColorFilter(filter);
  • 7.加载图像资源 :
代码语言：javascript复制
    private Bitmap bitmap;
    bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.trump);
  • 8.设置绘制区域 : 设置 左上右下 坐标 ;
代码语言：javascript复制
    RectF rectF = new RectF(0,0,getWidth(), getHeight());
  • 9.绘制图像 : 直接调用 Canvas 的 draw 方法绘制图像 ;
代码语言：javascript复制
   canvas.drawBitmap(bitmap, null , rectF, paint);
  • 10.滤镜使用完整代码 : 下面代码是一个自定义 View , 在 onDraw 方法中实现上述逻辑 , 不用的滤镜就是使用不同的 ColorMatrix 矩阵 ;
代码语言：javascript复制
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);

    }
}
红色通道翻倍

① 颜色矩阵代码 :

代码语言：javascript复制
        // ① 设置颜色矩阵 , 该矩阵将 红色通道的值 翻倍
        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

① 颜色矩阵代码 :

代码语言：javascript复制
        // ① 设置颜色矩阵 , 该矩阵将 红色通道的值 增加 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,
        });
底片效果

① 颜色矩阵代码 :

代码语言：javascript复制
        // ① 设置颜色矩阵 , 底片效果
        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,
        });

红绿通道交换效果

① 颜色矩阵代码 :

代码语言：javascript复制
        // ① 设置颜色矩阵 , 该矩阵将 红色 和 蓝色通道交换
        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,
        });

黑白照片效果

① 颜色矩阵代码 :

代码语言：javascript复制
        // ① 设置颜色矩阵 , 黑白照片效果
        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,
        });

复古效果

① 颜色矩阵代码 :

代码语言：javascript复制
        // ① 设置颜色矩阵 , 复古效果
        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,
        });

美颜效果

① 颜色矩阵代码 :

代码语言：javascript复制
        // ① 设置颜色矩阵 , 美颜效果
        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,
        });

相关代码地址 :

  • 1.GitHub 项目展示地址 : UI_Demos_4_CSDN_Blog
  • 2.本博客相关代码地址 : paint_filter
    • ① 颜色值翻倍 : PaintFilterA.java
    • ② 颜色值增加 : PaintFilterB.java
    • ③ 底片效果 : PaintFilterC.java
    • ④ 红绿通道交换效果 : PaintFilterD.java
    • ⑤黑白照片效果 : PaintFilterE.java
    • ⑥ 复古效果 : PaintFilterF.java
    • ⑦ 美颜效果 : PaintFilterG.java
android paint 对象 开发 数组

0 人点赞