Android Paint之颜色过滤器

导航

Android Paint之颜色过滤器

Paint之shader(图像渲染)

Paint之PathEffect(路径效果)

Paint API之—— MaskFilter(面具)

android之绘图工具类详解

Paint API之—— Xfermode与PorterDuff全面详解

Paint API之—— Xfermode与PorterDuff详解(三)动画效果

Paint枚举、常量值、阴影效果、字体

本节引言:

上节我们学习了MaskFilter(面具),用它的两个子类BlurMaskFilter弄了下模糊效果,EmbossMaskFilter 弄了下浮雕效果,而本节我们来学习的是另一个API——ColorFilter(颜色过滤器),和MaskFilter一样, 我们并不直接使用该类,而是使用该类的三个子类:

  • 颜色矩阵颜色过滤器:ColorMatrixColorFilter

  • 光照色彩过滤器:LightingColorFilter

  • 混排颜色过滤器滤器:PorterDuffColorFilter

本节我们就来学习下第一个ColorMatrixColorFilter的使用吧,打开ColorMatrixColorFilter的文档,

大概说的是:通过一个4 x 5的颜色矩阵来变换颜色,可以修改像素的饱和度,将YUV转换成RGB等! 而构造方法中的ColorMatrix就是颜色矩阵,也是我们学习的核心,下面听我一一道来!

1.相关常识的普及:

1.1RGBA模型:

RGBA不知道你听过没,黄绿蓝知道了吧,光的三基色,而RAGB则是在此的基础上多了一个透明度! R(Red红色)G(Green绿色)B(Blue蓝色)A(Alpha透明度);另外要和颜料的三 原色区分开来哦,最明显的区别就是颜料的三原色中用黄色替换了光三基色中的绿色!知道下就好, 有兴趣的可自行百度~

1.2一些名词:

  • 色调/色相——物体传递的颜色
  • 饱和度——颜色的纯度,从0(灰)到100%(饱和)来进行描述
  • 亮度/明度——颜色的相对明暗程度

一、ColorMatrix的解读

中文直译为“色彩矩阵颜色过滤器”,我们要先了解什么是色彩矩阵。在Android中图片是以RGBA像素点的形式加载到内存中的,修改这些像素信息需要一个叫做ColorMatrix类的支持,这个类其实定义的是一个矩阵,是一个4x5的float[]类型的矩阵:

ColorMatrix colorMatrix = new ColorMatrix(new float[]{  
                1, 0, 0, 0, 0,  // 红色向量
                0, 1, 0, 0, 0,  // 绿色向量
                0, 0, 1, 0, 0,  // 蓝色向量
                0, 0, 0, 1, 0,  // 透明度向量
        }); 

其中,第一行表示的R(红色)的向量,第二行表示的G(绿色)的向量,第三行表示的B(蓝色)的向量,最后一行表示A(透明度)的向量,这一顺序必须要正确不能混淆!你可能会问,那么列呢?我用图例来表示一下。

这个矩阵不同的位置表示的R、G、B、A值,其范围在0.0F至2.0F之间,1为保持原图的RGB值。每一行的第五列数字表示”偏移值“。

何为偏移值?顾名思义当我们想让颜色更倾向于红色的时候就增大R向量中的偏移值,想让颜色更倾向于蓝色的时候就增大B向量中的偏移值,这是最最朴素的理解,但是事实上色彩偏移的概念是基于白平衡来理解的。

什么是白平衡呢?说得简单点就是白色是什么颜色!在单反的设置参数中有个色彩偏移,其定义的就是白平衡的色彩偏移值,就是当你去拍一张照片的时候白色是什么颜色的,在正常情况下白色是(255, 255, 255, 255)但是“现实世界中我们是无法找到这样的纯白物体的”,所以在我们用单反拍照之前就会拿一个我们认为是白色的物体让相机记录这个物体的颜色作为白色,然后拍摄时整张照片的颜色都会依据这个定义的白色来偏移!而这个我们定义的“白色”(比如:255, 253, 251, 247)和纯白(255, 255, 255, 255)之间的偏移值(0, 2, 4, 8)我们称之为白平衡的色彩偏移。

测试一下:

我们想要绘制一个橙色的圆圈,橙色的效果如下:

我们建立一个矩阵,然后看看效果。

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        // 生成色彩矩阵  
        ColorMatrix colorMatrix = new ColorMatrix(new float[]{  
                1, 0, 0, 0, 0,  
                0, 1, 0, 0, 0,  
                0, 0, 1, 0, 0,  
                0, 0, 0, 1, 0,  
        });
        mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix)); 
        
        // 设置画笔颜色为自定义颜色  
        mPaint.setColor(Color.argb(255, 255, 128, 103)); 

        // 绘制圆环 (x坐标,y坐标,半径,画笔)
        canvas.drawCircle(240, 600 / 2, 200, mPaint);
    }

看看效果:

你会发现颜色没有任何变化,为什么呢?因为矩阵的1表示不做任何变化,也就是保持原样。我们换一个下面的矩阵就能看到效果了。

说明:如果在eclipse实时预览的话,它会提示说如果你设置了这个属性,那么eclipse可能无法准确的给你一个预览图。别担心,实际运行的时候就出来了。

 // 生成色彩矩阵  
        ColorMatrix colorMatrix = new ColorMatrix(new float[]{  
                0.5F, 0, 0, 0, 0,  
                0, 0.5F, 0, 0, 0,  
                0, 0, 0.5F, 0, 0,  
                0, 0, 0, 1, 0,  
        }); 

我们来看看这个矩阵是怎么计算的。其实说白了就是矩阵之间的运算乘积:

矩阵ColorMatrix的一行乘以矩阵MyColor的一列作为矩阵Result的一行,这里MyColor的RGBA值我们需要转换为[0, 1]。通过这种计算我们可以将我们自己设定的颜色和矩阵的颜色进行叠加,创立一个新的颜色。

再测试一下:

如果我们用它来给图片改颜色,该怎么做呢?下面的例子将会演示一下。

原本图片:

加上滤镜后:

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        // 生成色彩矩阵  
        ColorMatrix colorMatrix = new ColorMatrix(new float[]{  
                -1, 0, 0, 1, 1,  
                0, -1, 0, 1, 1,  
                0, 0, -1, 1, 1,  
                0, 0, 0, 1, 0,  
        }); 
        mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix)); 
        
        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.kale);
        canvas.drawBitmap(bitmap,240,600,mPaint);
    }

现在我们知道了,ColorMatrixColorFilter和ColorMatrix就是这么个东西,ColorMatrix类里面也提供了一些实在的方法,比如setSaturation(float sat)设置饱和度,而且ColorMatrix每个方法都用了阵列的计算,如果大家感兴趣可以自己去深挖。

二、PorterDuffColorFilter(光照色彩过滤器)

顾名思义光照颜色过滤,这肯定是跟光照是有关的了。该类有且只有一个构造方法:

LightingColorFilter (int mul, int add)  

mul全称是colorMultiply意为色彩倍增,而add全称是colorAdd意为色彩添加,这两个值都是16进制的色彩值0xAARRGGBB。这个方法使用也是非常的简单。还是拿上面那张图片来说吧,比如我们想要去掉绿色:

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        // 设置颜色过滤  
        mPaint.setColorFilter(new LightingColorFilter(0xFFFF00FF, 0x00000000));  
        
        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.kale);
        canvas.drawBitmap(bitmap,240,600,mPaint);
    }

运行后你会发现绿色确实是没了但是原来偏绿的部分现在居然成了红色,当LightingColorFilter(0xFFFFFFFF, 0x00000000)的时候原图是不会有任何改变的,如果我们想增加红色的值,那么LightingColorFilter(0xFFFFFFFF, 0x00XX0000)就好,其中XX取值为00至FF。

三、PorterDuffColorFilter(混排颜色过滤器滤器)

PorterDuffColorFilter跟LightingColorFilter一样,只有一个构造方法:

PorterDuffColorFilter(int color, PorterDuff.Mode mode)

这个构造方法也接受两个值,一个是16进制表示的颜色值这个很好理解,而另一个是PorterDuff内部类Mode中的一个常量值,这个值表示混合模式。那么什么是混合模式呢?混合混合必定是有两种东西混才行,第一种就是我们设置的color值而第二种当然就是我们画布上的元素了!也就是说将画布上的元素和我们设置的color进行混合,产生最终的效果。

你可以类比为PS中的混合模式,只是PS的图层混合模式比Android更多更广泛,但两者同名混合模式所产生的效果是一样的,也基于同样的算法原理这里就不多说了。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        // 设置颜色过滤  
        mPaint.setColorFilter(new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.DARKEN));  
        
        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.kale);
        canvas.drawBitmap(bitmap,240,600,mPaint);
    }

但是这里要注意一点,PorterDuff.Mode中的模式不仅仅是应用于图像色彩混合,还应用于图形混合,比如PorterDuff.Mode.DST_OUT就表示裁剪混合图。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容