（九）Paint 滤镜

最新推荐文章于 2024-04-08 13:24:29 发布
最新推荐文章于 2024-04-08 13:24:29 发布
阅读量324 收藏 1
点赞数 1
分类专栏： 高级UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18983205/article/details/72861020
版权

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文纯个人学习笔记，由于水平有限，难免有所出错，有发现的可以交流一下。

一、概述

滤镜效果就是对图像进行一定的过滤处理，安卓的颜色值有 32 位整数包含 4 个字节，ARGB 各占一个字节。：A—Alpha值，RGB—颜色值。

过滤主要分为两种，一是对 Alpha 的过滤处理，二是对 RGB 的过滤处理。

二、 Alpha 滤镜处理

MaskFilter 类进行处理，MaskFilter 又分为 BlurMaskFilter 和 EmbossMaskFilter 两种。
1.BlurMaskFilter 用来绘制模糊阴影

    /**
         * Create a blur maskfilter.
         *
         * @param radius 阴影的半径
         * @param style  NORMOL -- 整个图像都被模糊掉
         *               SOLID -- 图像边界外产生一层与Paint颜色一致阴影效果，不影响图像的本身
         *               OUTER -- 图像边界外产生一层阴影，并且将图像变成透明效果
         *               INNER -- 在图像内部边沿产生模糊效果
         * @return
         */
	public BlurMaskFilter(float radius, Blur style) ;

这是设置模糊半径为50的效果图。从左到右，从上到下，分别是原图、NORMOL 、SOLID 、OUTER 、INNER 。
这里写图片描述

这是设置模糊半径为100的效果图。从左到右，从上到下，分别是原图、NORMOL 、SOLID 、OUTER 、INNER 。

这里写图片描述

public class FilterView extends View {

    Paint paint;

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //硬件加速关闭
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
     
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.RED);
        
        canvas.drawRect(100, 100, 500, 500, paint);
        
        paint.setMaskFilter(new BlurMaskFilter(100, BlurMaskFilter.Blur.NORMAL));
        canvas.drawRect(700, 100, 1100, 500, paint);
        
        paint.setMaskFilter(new BlurMaskFilter(100, BlurMaskFilter.Blur.SOLID));
        canvas.drawRect(100, 700, 500, 1100, paint);
        
        paint.setMaskFilter(new BlurMaskFilter(100, BlurMaskFilter.Blur.OUTER));
        canvas.drawRect(700, 700, 1100, 1100, paint);
        
        paint.setMaskFilter(new BlurMaskFilter(100, BlurMaskFilter.Blur.INNER));
        canvas.drawRect(100, 1300, 500, 1700, paint);
      
    }
}

注：硬件加速必须关闭。

把红色方块换成图片的效果。
这里写图片描述

public class FilterView extends View {

    Paint paint;

    Bitmap bitmap;

    private int progress;
    private  Matrix matrix = new Matrix();
    public FilterView(Context context) {
        super(context);
        
        init();
    }

    private void init() {

        bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
       
        matrix.setScale((float)400/bitmap.getWidth(), (float)400/bitmap.getHeight());
        
        bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
                bitmap.getHeight(), matrix, true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
    
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.RED);
        canvas.drawBitmap(bitmap, 100, 100, paint);
        
        paint.setMaskFilter(new BlurMaskFilter(50, BlurMaskFilter.Blur.NORMAL));
        canvas.drawBitmap(bitmap, 700, 100, paint);
        
        paint.setMaskFilter(new BlurMaskFilter(50, BlurMaskFilter.Blur.SOLID));
        canvas.drawBitmap(bitmap, 100, 700, paint);
        
        paint.setMaskFilter(new BlurMaskFilter(50, BlurMaskFilter.Blur.OUTER));
        canvas.drawBitmap(bitmap, 700, 700, paint);
        
        paint.setMaskFilter(new BlurMaskFilter(50, BlurMaskFilter.Blur.INNER));
        canvas.drawBitmap(bitmap, 100, 1300, paint);  
    }
}

2、EmbossMaskFilter 实现浮雕效果

模拟光照的照射效果，靠近光的地方偏亮，根据颜色的亮暗，模拟出3D的浮雕效果。

      /**
         * Create an emboss maskfilter
         *
         * @param direction  指定光源的位置，长度为xxx的数组标量[x,y,z]
         * @param ambient    环境光的因子 （0~1），越接近0，环境光越暗
         * @param specular   镜面反射系数 越接近0，镜面反射越强
         * @param blurRadius 模糊半径 值越大，模糊效果越明显
         */
public EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius);

这里写图片描述

public class FilterView extends View {

    Paint paint;

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //硬件加速关闭
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
     
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.RED);
        
        canvas.drawRect(100, 100, 500, 500, paint);
        
        //光照在平面上，所以较暗
        paint.setMaskFilter(new EmbossMaskFilter(new float[]{1,1,0},0.2f,60,80));
        canvas.drawRect(700, 100, 1100, 500, paint);
        
        //光照在平面上方
        paint.setMaskFilter(new EmbossMaskFilter(new float[]{1,1,1},0.2f,60,80));
        canvas.drawRect(100, 700, 500, 1100, paint);
        
        //增强光照强度，越大阴影面积越小
        paint.setMaskFilter(new EmbossMaskFilter(new float[]{1,1,1},0.5f,60,80));
        canvas.drawRect(700, 700, 1100, 1100, paint);
        
        //减小镜面反射，颜色变淡（感觉1以上区别不大）
        paint.setMaskFilter(new EmbossMaskFilter(new float[]{1,1,1},0.2f,0.2f,80));
        canvas.drawRect(100, 1300, 500, 1700, paint);
        
        //增大阴影面积
        paint.setMaskFilter(new EmbossMaskFilter(new float[]{1,1,1},0.2f,60,160));
        canvas.drawRect(700, 1300, 1100, 1700, paint);
      
    }
}

注：一样别忘记关闭硬件加速。

三、 颜色矩阵

1.颜色矩阵概述

颜色矩阵正常是一个四阶的矩阵：
这里写图片描述

我们前面说到的颜色是 ARGB，但是在矩阵计算的时候是按 RGBA 来的，如把透明度变为一半：
这里写图片描述

四阶矩阵只支持颜色值的乘除运算，无法进行加减运算，如 R 要增加100，四阶矩阵无法实现。故在四阶色彩变换矩阵上增加一个“哑元坐标”，形成五阶矩阵来进行所有的运行：
这里写图片描述

注：颜色矩阵也可以用来进行透明度的变化，但更多是应用在 RGB 的变化。

简单的一个示例，透明度变为原来的一半：
这里写图片描述

public class FilterView extends View {

    Paint paint;

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //硬件加速关闭
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
     
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.RED);
        
        canvas.drawRect(100, 100, 500, 500, paint);
        //设置颜色矩阵过滤器
        paint.setColorFilter(new ColorMatrixColorFilter(new float[]{
                1,0,0,0,0,
                0,1,0,0,0,
                0,0,1,0,0,
                0,0,0,0.5f,0
        }));
        canvas.drawRect(700, 100, 1100, 500, paint);
    }
}

2.色彩的平移运算—加法运算

效果：增加特定色彩的饱和度，色彩的反转/反相；增加饱和度。

单独增加图片的绿色：
这里写图片描述

public class FilterView extends View {

    Paint paint;

    Bitmap bitmap;

    private  Matrix matrix = new Matrix();
    public FilterView(Context context) {
        super(context);
        
        init();
    }

    private void init() {

        bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
       
        matrix.setScale((float)400/bitmap.getWidth(), (float)400/bitmap.getHeight());
        
        bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
                bitmap.getHeight(), matrix, true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
    
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        canvas.drawBitmap(bitmap, 100, 100, paint);
        
        //设置颜色矩阵过滤器
        //平移运算--绿色加100
        paint.setColorFilter(new ColorMatrixColorFilter(new float[]{
                1,0,0,0,0,
                0,1,0,0,100,
                0,0,1,0,0,
                0,0,0,1,0
        }));
        canvas.drawBitmap(bitmap, 700, 100, paint);
    }
}

3.色彩的缩放运算–乘法运算

效果：高亮图片，颜色通道过滤（单独红色、绿色、蓝色）

所有颜色值扩大为2倍：
这里写图片描述

public class FilterView extends View {

    Paint paint;

    Bitmap bitmap;

    private int progress;
    private  Matrix matrix = new Matrix();
    public FilterView(Context context) {
        super(context);
        
        init();
    }

    private void init() {

        bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
       
        matrix.setScale((float)400/bitmap.getWidth(), (float)400/bitmap.getHeight());
        
        bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
                bitmap.getHeight(), matrix, true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
    
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        canvas.drawBitmap(bitmap, 100, 100, paint);
        
        //设置颜色矩阵过滤器
        //RGB变为原先2倍
        paint.setColorFilter(new ColorMatrixColorFilter(new float[]{
                2f,0,0,0,0,
                0,2f,0,0,0,
                0,0,2f,0,0,
                0,0,0,1,0
        }));     
        canvas.drawBitmap(bitmap, 700, 100, paint);
    }
}

4.加和乘的结合

反相效果：如 R 的值原先为 x，反相后为 255-x。
这里写图片描述

public class FilterView extends View {

    Paint paint;

    Bitmap bitmap;

    private int progress;
    private  Matrix matrix = new Matrix();
    public FilterView(Context context) {
        super(context);
        
        init();
    }

    private void init() {

        bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.timg);
       
        matrix.setScale((float)400/bitmap.getWidth(), (float)400/bitmap.getHeight());
        
        bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
                bitmap.getHeight(), matrix, true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);
    
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        canvas.drawBitmap(bitmap, 100, 100, paint);
        
        //设置颜色矩阵过滤器
        //颜色反相
        paint.setColorFilter(new ColorMatrixColorFilter(new float[]{
                -1,0,0,0,255,
                0,-1,0,0,255,
                0,0,-1,0,255,
                0,0,0,1,0
        }));     
        canvas.drawBitmap(bitmap, 700, 100, paint);
    }
}

5.黑白照片

**去色原理：**只要把R G B 三通道的色彩信息设置成一样，那么图像就会变成灰色。同时为了保证图像亮度不变，同一个通道里的R+G+B =1。

在安卓中，要实现这个去色原理，采用的是一个估计的矩阵值。

        paint.setColorFilter(new ColorMatrixColorFilter(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,
        }));

这里写图片描述

6.发色效果

红色和绿色交换：
这里写图片描述

矩阵：

        paint.setColorFilter(new ColorMatrixColorFilter(new float[]{
                0,1,0,0,0,
                1,0,0,0,0,
                0,0,1,0,0,
                0,0,0,1,0
        }));

7.复古效果

复古效果跟黑白效果一样，是一个经验矩阵。

   paint.setColorFilter(new ColorMatrixColorFilter(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,
        }));

这里写图片描述

8.颜色通道过滤

过滤红色：
这里写图片描述

矩阵：

        paint.setColorFilter(new ColorMatrixColorFilter(new float[]{
                1,0,0,0,0,
                0,0,0,0,0,
                0,0,0,0,0,
                0,0,0,1,0
        }));

四、其他 RGB 滤镜处理

Paint.setColorFilter(ColorFilter filter)；ColorFilter 还有两个子类 LightingColorFilter 和 PorterDuffColorFilter。

1.LightingColorFilter

LightingColorFilter 只会对颜色进行处理，透明度会被忽略。而且 RGB 的处理一直，能进行加法和乘法运许。

    /**
     * Create a colorfilter that multiplies the RGB channels by one color,
     * and then adds a second color. The alpha components of the mul and add
     * arguments are ignored.
     */
    public LightingColorFilter(int mul, int add) {
        mMul = mul;
        mAdd = add;
        update();
    }

2.PorterDuffColorFilter

PorterDuffColorFilter 穿入一个 ARGB 与一个混合模式，用这个颜色与图片进行混合。（混合模式规则在上一篇）

    public PorterDuffColorFilter(@ColorInt int color, @NonNull PorterDuff.Mode mode) {
        mColor = color;
        mMode = mode;
        update();
    }
孤独灬啸月
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android-高级-UI-进阶之路(四)-Paint-渲染-滤镜-xfermode-使用
m0_65145113的博客
12-30 1914
// 设置绘制路径的效果，如点画线等 PathEffect setPathEffect(PathEffect effect); // 设置MaskFilter，可以用不同的MaskFilter实现滤镜的效果，如滤化，立体等 MaskFilter setMaskFilter(MaskFilter maskfilter); // 设置Typeface对象，即字体风格，包括粗体，斜体以及衬线体，非衬线体等 Typeface setTypeface(Typeface typeface); // 设置光栅化 Rast
MaskFilter（滤镜）BlurMaskFilter（高斯滤镜）和EmbossMaskFilter（浮雕滤镜）的简单介绍和使用
minwenping的博客
06-25 2612
*官方介绍：***MaskFilter is the base class for object that perform transformations on an alpha-channel mask before drawing it. A subclass of MaskFilter may be installed into a Paint. Blur and emboss are imp
绘图进阶（二）
DLUT_WJX的博客
06-18 355
BlurmaskFliter发光效果与图片阴影 引入： 有了之前的阴影基础可以很快的上手发光部分，但是有以下几点特点需要先了解： 发光效果也是用高斯模糊算法，只会像阴影一样影响边缘，内部图像不受影响 无法指定特定的发光颜色，采用边缘模糊效果进行模糊发光，边缘是什么颜色，发光是什么颜色 概述： 1.setMskFilter()函数的使用（注意使用前关闭硬件加速）： //MaskFilter没有具...
Android 之 Paint API —— MaskFilter(面具)
leyang0910的博客
07-18 396
在使用MaskFilter的时候要注意，当我们的targetSdkVersion >= 14的时候，MaskFilter 就不会起效果了，这是因为Android在API 14以上版本都是默认开启硬件加速的，这样充分 利用GPU的特性，使得绘画更加平滑，但是会多消耗一些内存！//绘制文字大小，单位px。canvas.drawText("最喜欢看曹神日狗了~", 100, 100, paint);canvas.drawText("最喜欢看曹神日狗了~", 100, 200, paint);
BlurMaskFilter发光效果
baidu_24743861的博客
08-18 453
BlurMaskFilter发光效果
Android中的自绘View的那些事儿（五）之 遮罩滤镜：BlurMaskFilter 和 EmbossMaskFilter 的简介
子云心的博客
12-12 5031
MaskFilter MaskFilter翻译过来叫遮罩滤镜，它可以为Paint边缘的alpha通道应用转换。目前有两个子类：BlurMaskFilter 和 EmbossMaskFilter。它们分别可实现出模糊效果和浮雕效果。 BlurMaskFilter BlurMaskFilter是指定一个半径值使处理Paint的边缘变模糊。我们来看看它的构造函数： BlurMaskFilter...
android完美的图片滤镜效果
12-16
总之，Android图片滤镜的实现主要依赖于ColorMatrix类，结合Paint对象和ColorFilter，可以轻松地为图片添加各种视觉效果。通过不断试验和调整ColorMatrix的参数，开发者可以创造出无数独特的滤镜，为用户带来丰富的...
Android绘图之Paint的使用方法详解
08-28
Android 绘图之 Paint 的使用方法详解 Android 中的 Paint 类是一个非常重要的知识点，特别是在自定义控件中，它保存了绘制几何图形、文本和位图的样式和颜色信息。在本文中，我们将详细介绍 Paint 的使用方法，...
paint.net 源码
01-12
Paint.NET的滤镜系统也是其一大亮点。源码中包含了各种预定义的滤镜，如模糊、锐化、噪声消除等。这些滤镜的实现往往基于图像处理理论，例如傅立叶变换、卷积等。开发者可以通过阅读滤镜模块的代码，理解这些理论...
paint.net3.36源码.zip
12-03
源码揭示了颜色处理、滤镜应用、图层管理等关键功能的实现，包括像素操作、色彩空间转换、模糊、锐化、调整等。这些算法不仅在性能上优化，而且易于理解和扩展，为开发者提供了丰富的学习素材。 4. **插件系统** ...
Android如何绘制发光效果详解
01-03
前言 之前在看别人写自定义view作绘制的时候，看到别人家的view自带发光效果，看起来也是蛮炫酷的，于是自己也抽出时间来试用一下，这里做了一个模仿太阳的各种状态样式。 先上效果先上效果： 实现方式： public BlurMaskFilter(float radius, Blur style) { 实现是使用的Paint类的setMaskFilter()方法，传入BlurMaskFilter对象实现高斯模糊发光。 float radius 设置模糊半径 Blur style 设置发光样式，包括 Blur.INNER(内发光)，Blur.NORMAL(内外发光)
android 组件边界,自定义控件（7）---BlurMaskFilter边界阴影
weixin_42469083的博客
05-26 1014
Android中的很多自带控件都有类似软阴影的效果，比如说Button，使用BlurMaskFilter就可以得到类似的效果 activity_main.xmlandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFFFFF"android:orientation="...
Paint的setMaskFilter(MaskFilter maskfilter）
jtlack的博客
07-23 418
Paint的setMaskFilter(MaskFilter maskfilter）setMaskFilter(MaskFilter maskfilter)一、BlurMaskFilter1.1 像FloatingActionButton一样的阴影效果1.2给图片设置效果EmbossMaskFilter 本文转载自 https://www.cnblogs.com/tianzhijiexian/p/4297734.html 尊重版权，感谢者的分享 setMaskFilter(MaskFilter maskfi
Android 使用MaskFilter为Paint设置效果
2401_84010836的博客
03-30 826
OUTER：在目标外显示面具，从边缘向目标外到离边缘radius宽的地方，并且该部分会显示出从目标边缘获得的颜色，不显示目标SOLID：在目标外显示面具，从边缘向目标外到离边缘radius宽的地方，并且该部分会显示出从目标边缘获得的颜色，显示目标看初始化函数style)，两个变量，一个是显示时从边缘到离边缘多宽的值，一个是显示模式，简单应用如下这是一个使用后会在目标上显示凹凸不平水印的面具。看初始化。
StickyListHeaders的用法说明（带字母索引条），安卓framework面试题
最新发布
2301_79655576的博客
04-08 773
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。上面分享的腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。【Android思维脑图（技能树）】知识不体系？
MaskFilter ‘面具’
一个IT屌丝的专栏
06-26 484
1：MaskFilter介绍 字面翻译可以叫他’面具’，就是我们可以给所画的对象套上这个‘面具’从而达到某些效果，他是设置在画笔上来使用，就是通过改变目标的alpha通道值来达到目的 下面的BlurMaskFilter(模糊)、EmbossMaskFilter(浮雕)是他的子类 MaskFilter本身没有什么方法，主要是使用下面的子类 2：BlurMaskFilter（模糊效果...
Android 高级UI解密 (二) ：Paint滤镜 与 颜色过滤（矩阵变换）
lemonGuo的大脑皮层、小脑、海马体、杏仁核.....
12-21 2688
若是曾经查看过系统UI的源码，会发现其中使用了一些渲染效果，例如将图片加上黑白、怀旧的效果，生活中常用的逆天美颜相机，其中的原理就是使用了**滤镜效果、颜色通道过滤**。若还要深究其原理组成，便涉及到了高等数学里的矩阵变换，也就是Android 中的**颜色矩阵**！此篇文章便来一探究竟如何实现滤镜和其原理组成。 （关于矩阵这一块，无需过度深究数学部分，此处为了充分理解渲染效果，只需了解大概原理，利用其API完成简
高级UI-滤镜和颜色通道
cj5785
04-06 2026
滤镜在图片处理里面有很多的运用，尤其是相机使用了大量的滤镜，通过对颜色通道的调和，可以呈现出各种各样的效果 对图像进行一定的过滤加工处理，使用Paint设置滤镜效果 很多高级UI使用时候需要关闭硬件加速，不关闭的话，有些API无法支持 Alpha滤镜处理 MaskFilter处理类 paint.setMaskFilter(maskfilter) 以下两种处理基于下面的初始化 //关闭硬件加速 se...
Android开发：详解Paint与Canvas关键方法
- `drawBitmap(Bitmap bitmap, float left, float top, Paint paint)`：在画布上绘制位图，可以使用Paint对象进行滤镜效果或颜色转换。 - `drawPath(Path path, Paint paint)`：根据给定的Path对象绘制图形，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值