美文网首页
滤镜效果

滤镜效果

作者: 其勇勇 | 来源:发表于2017-08-31 01:20 被阅读0次

滤镜效果大家肯定都知道，毕竟现在相机这么牛，一般都有这个功能。
不废话，开搞！

所谓滤镜效果，就是对一张图像的颜色进行特定处理（ARGB）

准备工作

创建一个继承于View的类，然后

//写3个私有成员变量
private Paint paint;//用于原图的画笔
private Paint paint2;//用于滤镜的画笔
private Bitmap bitmap;//图像

//在构造函数中初始化一下
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.shuaige);

接下来的操作将都在onDraw中进行，并且要关闭硬件加速先

setLayerType(View.LAYER_TYPE_SOFTWARE,null);

原图

shuaige.jpg

首先在onDraw中把原图画出来

//画出原图
canvas.drawBitmap(bitmap,50,50,paint);
//画板位置向下平移
canvas.translate(0,500);

1、Alpha滤镜处理

Alpha滤镜效果主要通过MaskFilter类进行处理，MaskFilter拥有两个子类BlurMaskFilter和EmbossMaskFilter，BlurMaskFilter用来绘制模糊阴影，EmbossMaskFilter用来用来实现浮雕立体效果

（1）BlurMaskFilter

首先看一下BlurMaskFilter的构造方法

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

接下来看看它们的效果

● style---NORMOL

paint2.setMaskFilter(new BlurMaskFilter(60, BlurMaskFilter.Blur.NORMAL));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830211237.png

● style---SOLID

paint2.setMaskFilter(new BlurMaskFilter(60, BlurMaskFilter.Blur.NORMAL));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830213038.png

● style---OUTER

paint2.setMaskFilter(new BlurMaskFilter(60, BlurMaskFilter.Blur.NORMAL));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830213251.png

● style---INNER

paint2.setMaskFilter(new BlurMaskFilter(60, BlurMaskFilter.Blur.NORMAL));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830213443.png

（2）EmbossMaskFilter

首先看一下EmbossMaskFilter的构造方法

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

接下来看看它们的效果

new float[]{2,2,2}, 0.1f, 10, 60

paint2.setMaskFilter(new EmbossMaskFilter(new float[]{2,2,2},0.1f,10,60));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830214650.png

2、颜色RGB的滤镜处理

首先需要大家掌握一些矩阵运算的基本知识（这个大家有点线性代数基础的都会懂的）--乘法


举证乘法.png

再看一下颜色矩阵乘法


颜色矩阵乘法.gif
该矩阵意思就是将图中颜色（RGBA）透明度变成它原来的一半，但是我们会发现，这种算法只能乘，如果我们有相加的需求，这种明显是不适用的。所以，应该在四阶色彩变换矩阵上增加一个“哑元坐标”，来实现所列的矩阵运算。
哑元坐标.gif

（1）ColorMatrix

颜色RGB的滤镜处理主要通过ColorMatrix这个颜色矩阵类来完成，下面一起来看看具体代码和显示

● 平移运算---加法（就是将某个颜色值增加一个固定的值，此处是将绿色的值加了100）

ColorMatrix colorMartrix = new ColorMatrix(new float[]{
                1, 0,0,0,0,
                0,1,0,0,100,
                0,0,1,0,0,
                0,0,0,1,0
        });
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830223456.png

● 反相效果 -- 底片效果（就是将每个像素都变成它的相反的值）

ColorMatrix colorMartrix = new ColorMatrix(new float[]{
                -1, 0,0,0,255,
                0,-1,0,0,255,
                0,0,-1,0,255,
                0,0,0,1,0
        });
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830224810.png

● 缩放运算---乘法 -- 颜色增强（此处将每个色值都乘1.4倍）

ColorMatrix colorMartrix = new ColorMatrix(new float[]{
                1.4f, 0,0,0,0,
                0,1.4f,0,0,0,
                0,0,1.4f,0,0,
                0,0,0,1,0
        });

//或者
//ColorMatrix colorMartrix = new ColorMatrix();
//colorMartrix.setScale(1.2f,1.2f,1.2f,1);

paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830225334.png

● 黑白照片

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

ColorMatrix colorMartrix = 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
        });
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830225729.png

● 发色效果---（比如红色和绿色交换）

ColorMatrix colorMartrix = new ColorMatrix(new float[]{
                0,1,0,0,0,
                1, 0,0,0,0,
                0,0,1,0,0,
                0,0,0,1,0
        });
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830230034.png

● 复古效果

ColorMatrix colorMartrix = 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
        });
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830230303.png

● 颜色通道过滤（此处过滤红色）

ColorMatrix colorMartrix = new ColorMatrix(new float[]{
                1, 0,0,0,0,
                0,0,0,0,0,
                0,0,0,0,0,
                0,0,0,1,0
        });
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830230630.png

● 增加饱和度

ColorMatrix colorMartrix = new ColorMatrix();
colorMartrix.setSaturation(2f);
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830231845.png

● 颜色旋转

ColorMatrix colorMartrix = new ColorMatrix();
//setRotate参数
//aixs-- 0 红色轴，1，绿色，2，蓝色
//degrees -- 旋转的角度
colorMartrix.setRotate(0,10f);
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830232406.png

● 颜色矩阵叠加效果（红色值加100，另外再各个颜色增强）

ColorMatrix colorMartrix1 = new ColorMatrix(new float[]{
                1, 0,0,0,100,
                0,1,0,0,0,
                0,0,1,0,0,
                0,0,0,1,0
        });
 ColorMatrix colorMartrix2 = new ColorMatrix(new float[]{
                1.4f, 0,0,0,0,
                0,1.4f,0,0,0,
                0,0,1.4f,0,0,
                0,0,0,1.4f,0
        });
colorMartrix.setConcat(colorMartrix1,colorMartrix2);
paint2.setColorFilter(new ColorMatrixColorFilter(colorMartrix));
canvas.drawBitmap(bitmap,50,150,paint2);
QQ截图20170830233123.png

（2）LightingColorFilter

LightingColorFilter主要是可以对颜色值一次性的进行乘和加，但是这里只是修改RGB值，首先看一看LightingColorFilter的构造方法。

/**
*mul   颜色值乘的倍数
*add   颜色值增加的值
*/
LightingColorFilter(int mul, int add)

下面看看具体应用

//表示将原有的颜色值先乘0x00ff00，再加0xff0000
paint2.setColorFilter(new LightingColorFilter(0x00ff00,0xff0000));
canvas.drawBitmap(bitmap,50,150,paint2)
QQ截图20170830235335.png

（3）PorterDuffColorFilter

PorterDuffColorFilter可以用于颜色与原图像混合叠加的效果
首先开看一看PorterDuffColorFilter的构造方法

/**
*color 进行叠加的颜色
*mode 叠加的模式
*/
PorterDuffColorFilter(@ColorInt int color, @NonNull PorterDuff.Mode mode)

再来看看叠加模式PorterDuff.Mode有哪些

public enum Mode {
        /** [0, 0] */
        CLEAR       (0),
        /** [Sa, Sc] */
        SRC         (1),
        /** [Da, Dc] */
        DST         (2),
        /** [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] */
        SRC_OVER    (3),
        /** [Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc] */
        DST_OVER    (4),
        /** [Sa * Da, Sc * Da] */
        SRC_IN      (5),
        /** [Sa * Da, Sa * Dc] */
        DST_IN      (6),
        /** [Sa * (1 - Da), Sc * (1 - Da)] */
        SRC_OUT     (7),
        /** [Da * (1 - Sa), Dc * (1 - Sa)] */
        DST_OUT     (8),
        /** [Da, Sc * Da + (1 - Sa) * Dc] */
        SRC_ATOP    (9),
        /** [Sa, Sa * Dc + Sc * (1 - Da)] */
        DST_ATOP    (10),
        /** [Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc] */
        XOR         (11),
        /** [Sa + Da - Sa*Da,
             Sc*(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)] */
        DARKEN      (16),
        /** [Sa + Da - Sa*Da,
             Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] */
        LIGHTEN     (17),
        /** [Sa * Da, Sc * Dc] */
        MULTIPLY    (13),
        /** [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] */
        SCREEN      (14),
        /** Saturate(S + D) */
        ADD         (12),
        OVERLAY     (15);

        Mode(int nativeInt) {
            this.nativeInt = nativeInt;
        }

        /**
         * @hide
         */
        public final int nativeInt;
    }

这里一共有17种叠加模式，接下来我将以蓝色为叠加颜色，然后展示所有叠加效果。

这里需要注意 这里我们的bitmap属于目标图片（DST），Color.argb(175,140,90,200)属于源图片（SRC）
再来看看叠加规则
[] : [展示的透明度, 展示的颜色值]
Sa：源图片的透明度
Sc：源图片的颜色值
Da：目标图片的透明度
Dc：目标图片的颜色值

● CLEAR

paint2.setColorFilter(new PorterDuffColorFilter(Color.argb(175,140,90,200), PorterDuff.Mode.CLEAR));
canvas.drawBitmap(bitmap,50,150,paint2);
CLEAR 效果
混合算法：[0, 0]

● SRC

paint2.setColorFilter(new PorterDuffColorFilter(Color.argb(175,140,90,200), PorterDuff.Mode.SRC));
canvas.drawBitmap(bitmap,50,150,paint2);
SRC 效果
混合算法：[Sa, Sc]

● DST

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.DST));
canvas.drawBitmap(bitmap,50,150,paint2);
DST 效果
混合算法：[Da, Dc]

● SRC_OVER

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.SRC_OVER));
canvas.drawBitmap(bitmap,50,150,paint2);
SRC_OVER 效果
混合算法：[Sa + (1 - Sa)Da, Rc = Sc + (1 - Sa)Dc]

● DST_OVER

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.CLEAR));
canvas.drawBitmap(bitmap,50,150,paint2);
DST_OVER 效果
混合算法：[Sa + (1 - Sa)Da, Rc = Dc + (1 - Da)Sc]

● SRC_IN

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap,50,150,paint2);
SRC_IN 效果
混合算法：[Sa * Da, Sc * Da]

● DST_IN

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.DST_IN));
canvas.drawBitmap(bitmap,50,150,paint2);
DST_IN 效果
混合算法：[Sa * Da, Sa * Dc]

● SRC_OUT

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.SRC_OUT));
canvas.drawBitmap(bitmap,50,150,paint2);
SRC_OUT效果
混合算法：[Sa * (1 - Da), Sc * (1 - Da)]

● DST_OUT

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.DST_OUT));
canvas.drawBitmap(bitmap,50,150,paint2);
DST_OUT 效果
混合算法：[Da * (1 - Sa), Dc * (1 - Sa)]

含义参考 SRC_OUT

● DST_ATOP

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.DST_ATOP));
canvas.drawBitmap(bitmap,50,150,paint2);
DST_ATOP 效果
混合算法：[Sa, Sa * Dc + Sc * (1 - Da)]

● SRC_ATOP

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.CLEAR));
canvas.drawBitmap(bitmap,50,150,paint2);
SRC_ATOP 效果
混合算法：[Da, Sc * Da + (1 - Sa) * Dc]

● XOR

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.XOR));
canvas.drawBitmap(bitmap,50,150,paint2);
XOR 效果
混合算法：[Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc]

● DARKEN

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.DARKEN));
canvas.drawBitmap(bitmap,50,150,paint2);
DARKEN 效果
混合算法：[Sa + Da - SaDa,Sc(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)]

● LIGHTEN

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.LIGHTEN));
canvas.drawBitmap(bitmap,50,150,paint2);
LIGHTEN 效果
混合算法：[Sa + Da - SaDa, Sc(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)]

● MULTIPLY

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.MULTIPLY));
canvas.drawBitmap(bitmap,50,150,paint2);
MULTIPLY 效果
混合算法：[Sa * Da, Sc * Dc]

● SCREEN

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.SCREEN));
canvas.drawBitmap(bitmap,50,150,paint2);
SCREEN 效果
混合算法：[Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]

● ADD

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.ADD));
canvas.drawBitmap(bitmap,50,150,paint2);
ADD 效果
混合算法：Saturate(S + D)

● OVERLAY

paint2.setColorFilter(new PorterDuffColorFilter(Color.BLUE, PorterDuff.Mode.OVERLAY));
canvas.drawBitmap(bitmap,50,150,paint2);
OVERLAY 效果
混合算法：

个人觉得很全了，差不多可以满足大部分滤镜效果

版权声明：个人原创，若转载，请注明出处

相关文章

  • 滤镜效果

    滤镜效果大家肯定都知道，毕竟现在相机这么牛，一般都有这个功能。不废话，开搞！ 所谓滤镜效果，就是对一张图像的颜色进...

  • iOS-GPUImage 本地视频添加滤镜

    本文内容： 1、播放本地视频，实时添加滤镜，修改不同的滤镜效果 2、给本地视频添加滤镜，然后保存有滤镜效果的视频到...

  • 2020-05-18

    CIFilter 实现滤镜效果 ，苹果给我们提供了将近200中滤镜效果，具体苹果官网及展示效果 CIFilter苹...

  • PhotoShop教程 PS滤镜制作魔幻背景特效

    本教程介绍用PhotoShop滤镜制作魔幻背景特效效果，主要用到滤镜，滤镜主要是用来实现图像的各种特殊效果。 最终...

  • OpenGL ES 动态效果滤镜

    这篇文章介绍一下带有动态效果的滤镜，大家可以先了解下 分屏滤镜 和 马赛克滤镜 。 动态效果的滤镜其实就是根据当前...

  • CoreImage（二）CIFilter滤镜效果使用

    CIFilter滤镜效果使用 CIFilter是使用CoreImage进行滤镜效果的核心类，通过这个类设置（KVC...

  • 2019-08-27

    滤镜分类 根据滤镜的功能对滤镜进行了如下分类，方便大家查阅—— 柔化系列效果滤镜 光学系列滤镜 颜色系列滤镜 灰...

  • iOS 滤镜效果

    综合滤镜 静态滤镜 {灰度, 颠倒, 旋涡, 马赛克, 马赛克2, 马赛克3} 动态滤镜动态滤镜效果.gif 代码...

  • AI滤镜

    ai滤镜将根据您的照片为您提供相匹配的滤镜及贴纸图片 【特效丰富】 可为您的照片添加各种滤镜效果以及各种贴纸效果；...

  • IOS开发图片处理：添加滤镜功能。

    一、滤镜的内容和效果是比较多并且复杂的 ，学习滤镜需要技巧 如下：两个输出语句解决滤镜的属性选择问题：1.查询效果...

网友评论

      本文标题：滤镜效果

      本文链接：https://www.haomeiwen.com/subject/dmixjxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|滤镜效果|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！