美文网首页Android开发Android技术知识Android开发
Android关于Color你所知道的和不知道的一切

Android关于Color你所知道的和不知道的一切

作者: e4e52c116681 | 来源:发表于2018-11-10 14:06 被阅读20次

    零、前言

    1.做安卓的大多应该对颜色不太敏感,毕竟咱是敲代码的,颜色有设计师呢。
    2.不过作为一名在大学被颜色熏(陶)过四年的人,对颜色多少还是挺亲切的(虽然当时挺讨厌的)
    3.纪念也好,记录也罢,为它写篇总结也理所应当
    4.如果你觉得并不需要了解关于颜色的知识,那你可以将本文当做一篇科普文(出去跟人家吹吹牛还是够用的)


    一、颜色知识科普:

    这一切都要从光开始:
    有个叫牛顿的人拿一块三棱镜将太阳光折射出了彩色产生色散现象:
    ----色散现象说明光在介质中的速度v=c/n(或折射率n)随光的频率f而变,从而:证明了光具有波动性
    
    光的色散 光的色散图示
    timg.jpg 光的色散.jpg
    关于黑与白
    问:如果把所有非黑的颜料混合,会得到什么?----感觉一团糟,应该是黑色吧
    问:如果把所有非白的光混合,会得到什么?----感觉越来越亮,应该是白色吧
    

    为何光的叠加和颜料的叠加会产生相反的效果?
    从一开始,这个问题就困扰着我,也将一直困扰这我...
    如果说[肉眼所见到的光线,是由波长范围很窄的电磁波产生的,不同波长的电磁波表现为不同的颜色],
    那光的叠加也就是波的叠加,貌似有个[波动方程]吧...只能这样说服自己:
    
    光色叠加是减色模式:会越来约"淡"
    颜料色叠加是加色模式:会越来约"浓"
    
    原色.png

    色彩模式

    1.RGB:设备相关的颜色模型

    安卓敲代码的多少都用过#ffff00表示黄色吧,这是RGB的一种表现形式
    你也可以用"R:255,G:255,B:0"来表示黄色,其实两者是一个意思,只不过是10进制和16进制的转化

    RGB.png

    RGB的位数:

    RGB还有位数的区别,也就是一个颜色占几位,一般是8位,
    也就是用1个字节表示一种颜色(一个字节8位)
    1个字节(8位)每种颜色有0~255共256种中颜色,三色共表达:256*256*256=16,777,216种颜色
    所以RGB并不能代表所有颜色,它只是一个子集,自然界的颜色是无穷的。人类只能模拟
    16位是2个字节代表一种颜色,每种颜色有0~65535共65536中颜色,  
    三色共表达:65536*65536*65536=279213318656种颜色
    
    2.ARGB:设备相关的颜色模型(加透明度)

    即在RGB的基础上添加添加透明度
    颜色通道的概念(自己的理解,仅供参考):

    大学那会学ps,动不动红色通道,Alpha通道的,搞得云里雾里,现在想想  
    拿ARGB_8888(八位)来说,就相当有四道墙,每道墙上有256扇门分别标上0~255数字  
    第一道墙叫Alpha(透明度)墙,第二道墙叫R(红)墙,第二道墙叫G(绿)墙,第二道墙叫B(蓝)墙  
    现在你要从这四道墙的门走到终点,每次进门拿着门牌号,当你走到终点时,门牌号加起来就是颜色
    那门,就是通道,如果进红色的0门(俗称:红色通道关闭),从表现上来看最终颜色不带红色,如下下图
    
    通道.png 不开红色通道.png

    为什么编程里用int作为颜色?

    众所周知:一个int占4个字节,也就是4*8个位,刚好用来盛放ARGB_8888。
    
    int表示颜色.png
    3.CMYK:C(青)M(品红)Y(黄)K(黑色)
    作为程序员对CMYK了解估计不多,毕竟都在屏幕上,是ARGB的的天下
    对于打印使用CMYK,符号是%,以不同颜色的百分比调色,理论上只应该有CMY就行了  
    但实际黑色(K)的要比其他三色更容易生产,用三张一百块合成为一张十块钱估计没人会这么做
    至于为什么叫K...也许是RGB先出来的,然后不能叫B,只能叫K了
    
    4.HSV:

    看到值就能想到大概的颜色

    颜色有三个维度属性:色相、明度和饱和度  
    
    HSV模型对应于:
    圆柱坐标系中的一个圆锥形子集,圆锥的顶面对应于V=1。
    它包含RGB模型中的R=1,G=1,B=1三个面,所代表的颜色较亮。
    色彩H由绕V轴的旋转角给定。红色对应于角度0°,绿色对应于角度120°,蓝色对应于角度240°。
    在HSV颜色模型中,每一种颜色和它的补色相差180°。饱和度S取值从0到1,所以圆锥顶面的半径为1。
    
    hsv.png
    5.看一下黄色的几种表达方式:
    黄色.png
    RGB:R:255 G:255 B:0        #ffff00
    CMYK:C:10% M:0 Y:83% K:0
    HSV:H:60° S:100% V:100%
    

    好了,科普结束,下面进入正题


    一、Android中的Color

    颜色使用场景:
    1.基本使用:背景、阴影、文字颜色
    2.基于Color创建的Bitmap以及叠合模式:Xfermode
    3.paint中的着色、颜色过滤器
    4.ColorMatrix的使用

    1.常量:
    Color中的默认色常量.png
    2.构造函数

    可见只有无参数构造可以用

    Color构造函数.png
    3.常用方法:
    int blue = Color.BLUE;//第一种获取蓝色方法
    blue = Color.parseColor("#0000FF");//第二种获取蓝色方法
    blue = Color.rgb(0, 0, 255);//第三种获取蓝色方法
    blue = Color.argb(255, 0, 0, 255);//第四种获取蓝色方法
    blue = Color.HSVToColor(new float[]{240.0f, 1.0f, 1.0f});//第五种获取蓝色方法
    blue = Color.HSVToColor(0xff0000FF);//第六种获取蓝色方法
    //(吐槽:怎么有种孔乙己说茴香豆的茴字有多少种写法一样...,看哪个顺手就用哪个吧)
    
    float[] hsv = {0, 0, 0};//hsv数组
    Color.RGBToHSV(0, 0, 255, hsv);//将RGB转为hsv
    Log.e(TAG, "onDraw: " + hsv[0]+","+hsv[1]+","+hsv[2]);
    //onDraw: 240.0,1.01.0
    

    其实Color的本身并没有太多的知识点,毕竟就是一个int而已,难点在于颜色的拼合与变换

    二、Android位图封装类:Bitmap

    什么是位图,前面讲过颜色是按位存储的,ARGB_8888每种颜色占8位
    相信大家都知道一张jpg或png放大后会是一个个小格子,称为一个像素(px),而且一个小格子是一种颜色
    也就是一张jpg或png图片就是很多颜色的合集,而这些合集信息都被封装到了Bitmap类中
    你可以使用Bitmap获取任意像素点,并修改它,对与某像素点而言,颜色信息是其主要的部分

    像素.png
    1.重新认识Bitmap

    我们一般使用Bitmap是都是用BitmapFactory来decode资源,所以并未设计太多Bitmap的操作,以致认为Bitmap=图片
    Bitmap实际是一个封装图片像素信息的类,它能显示出来是因为View及手机的硬件

    1).创建一个Bitmap:

    注意区别bitmapCanvas和View中OnDraw中Canvas的区别:
    这里:bitmapCanvas是负责在位图(Bitmap)上绘制,让位图记录像素点位信息的
    OnDraw中Canvas是用来在View上绘制,显示在屏幕上的。

    打个不恰当的比方:
    你是bitmapCanvas,负责画一张图(Bitmap),你画完后不能直接交给印刷人员(View)去印
    需要交给审稿员(OnDraw中canvas),经过他允许才能给印刷人员

    /**
     * 创建一个Bitmap
     *
     * @param color 背景色
     * @return bitmap
     */
    private Bitmap createBitmap(int color) {
        //创建一个ARGB_8888,宽高200的bitmap
        Bitmap bitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
        //使用Bitmap创建一个canvas画板,画板上的一切都会保留在bitmap上
        Canvas bitmapCanvas = new Canvas(bitmap);
        //接下来就是在画板上操作
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(color);
        Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        bitmapCanvas.drawRect(rect, p);
        p.setColor(Color.GRAY);
        p.setStrokeWidth(3);
        bitmapCanvas.drawLine(0, 0, 200, 200, p);
        bitmapCanvas.drawLine(200, 0, 0, 200, p);
        return bitmap;
    }
    

    OnDraw中使用Bitmap,使用Bitmap,使用Bitmap...

    //审稿人统一,印刷到View上
    canvas.drawBitmap(mBitmap, 100, 100, mMainPaint);
    
    绘制bitmap.png

    三、Xfermode:图片叠合时的处理方式

    Xfermode.png

    终于写到这里了,总算与Xfermode相遇了,最喜欢分析很多的情况,这里有18种模式,想想都激动...。
    做开发的,我们应该知道src和dst吧src是源,dst是目标,在react里就有src的源文件,和dest的输出文件
    图片叠合顾名思义,必须有两个图片才行,这里原图src用蓝色正方形,目标dst用绿色圆形

    1.src和dst图片
    源与目标.png
        /**
         * 创建源图片
         *
         * @return bitmap
         */
        private Bitmap createSrcBitmap() {
            //创建一个ARGB_8888,宽高200的bitmap
            Bitmap bitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
            //使用Bitmap创建一个canvas画板,画板上的一切都会保留在bitmap上
            Canvas bitmapCanvas = new Canvas(bitmap);
            //接下来就是在画板上操作
            Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
            p.setColor(0x882045F3);
            Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
            bitmapCanvas.drawRect(rect, p);
            return bitmap;
        }
    
        /**
         * 创建目标
         *
         * @return bitmap
         */
        private Bitmap createDstBitmap() {
            //创建一个ARGB_8888,宽高200的bitmap
            Bitmap bitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
            //使用Bitmap创建一个canvas画板,画板上的一切都会保留在bitmap上
            Canvas bitmapCanvas = new Canvas(bitmap);
            //接下来就是在画板上操作
            Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
            p.setColor(0xff43F41D);
            bitmapCanvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getHeight() / 2,p);
            return bitmap;
        }
    
    2.叠合模式18种:android.graphics.PorterDuff.Mode

    别怕,别怕,一幅图展示一下:

        public enum Mode {
            CLEAR       (0),
            SRC         (1),
            DST         (2),
            SRC_OVER    (3),
            DST_OVER    (4),
            SRC_IN      (5),
            DST_IN      (6),
            SRC_OUT     (7),
            DST_OUT     (8),
            SRC_ATOP    (9),
            DST_ATOP    (10),
            XOR         (11),
            DARKEN      (16),
            LIGHTEN     (17),
            MULTIPLY    (13),
            SCREEN      (14),
            ADD         (12),
            OVERLAY     (15);
    
            Mode(int nativeInt) {
                this.nativeInt = nativeInt;
            }
            public final int nativeInt;
        }
    
    3.如何优雅地绘制下面一幅图:

    注意:测试了一下,开不开硬件加速对这东西有影响,下面在无有硬件加速:android:hardwareAccelerated="false"
    mMainPaint.setXfermode(XXX);放置的顺序也很重要,在下面的是叠合的源
    网上有一组图,不过没有透明度,我对源(蓝色)加了88的透明度,显示的更清楚些
    注意:看正方形框里的内容,看正方形框里的内容,看正方形框里的内容!因为它是被叠合的对象

    Screenshot_2018-11-10-11-17-14-46.png
        private void init() {
            mMainPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mMainPaint.setStyle(Paint.Style.FILL);
            mMainPaint.setStrokeCap(Paint.Cap.ROUND);
    
            src = createSrcBitmap();
            dst = createDstBitmap();
    
            //背景图层的笔
            mLayerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mLayerPaint.setStyle(Paint.Style.FILL);
            mLayerPaint.setFilterBitmap(false);
            
            //文字的笔
            mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mTextPaint.setTextSize(45);
            Typeface typeface = Typeface.create(Typeface.MONOSPACE, Typeface.BOLD);
            mTextPaint.setTypeface(typeface);
            mTextPaint.setColor(0xffF98D1F);
    
            //虚线画笔
            mDashPaint = new Paint();
            mDashPaint.setStrokeWidth(3);
            mDashPaint.setColor(Color.RED);
            mDashPaint.setStyle(Paint.Style.STROKE);
            //设置虚线效果new float[]{可见长度, 不可见长度},偏移值
            mDashPaint.setPathEffect(new DashPathEffect(new float[]{10, 5}, 0));
    
            mModes = new PorterDuffXfermode[]{
                    new PorterDuffXfermode(PorterDuff.Mode.CLEAR),//0
                    new PorterDuffXfermode(PorterDuff.Mode.SRC),//1
                    new PorterDuffXfermode(PorterDuff.Mode.DST),//2
                    new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER),//3
                    new PorterDuffXfermode(PorterDuff.Mode.DST_OVER),//4
                    new PorterDuffXfermode(PorterDuff.Mode.SRC_IN),//5
                    new PorterDuffXfermode(PorterDuff.Mode.DST_IN),//6
                    new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT),//7
                    new PorterDuffXfermode(PorterDuff.Mode.DST_OUT),//8
                    new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP),//9
                    new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP),//10
                    new PorterDuffXfermode(PorterDuff.Mode.XOR),//11
                    new PorterDuffXfermode(PorterDuff.Mode.DARKEN),//12
                    new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN),//13
                    new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY),//14
                    new PorterDuffXfermode(PorterDuff.Mode.SCREEN),//15
                    new PorterDuffXfermode(PorterDuff.Mode.ADD),//16
                    new PorterDuffXfermode(PorterDuff.Mode.OVERLAY),//17
            };
    
            mModeText = new String[]{"CLEAR", "SRC", "DST", "SRC_OVER", "DST_OVER", "SRC_IN",
                    "DST_IN", "SRC_OUT", "DST_OUT", "SRC_ATOP", "DST_ATOP", "XOR", "DARKEN",
                    "LIGHTEN", "MULTIPLY", "SCREEN", "ADD", "OVERLAY"
            };
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //创建一个图层,在图层上演示图形混合后的效果
            int sc = 0;
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                sc = canvas.saveLayer(new RectF(0, 0, 2500, 2500), mLayerPaint);
            }
            for (int i = 0; i < 18; i++) {
                int line = i % 6;
                int row = i / 6;
    
                canvas.drawBitmap(dst, 350 * line, row * 350, mMainPaint);//目标图象
                mMainPaint.setXfermode(mModes[i]);//设置对源的叠合模式
                canvas.drawBitmap(src, 100 + 350 * line, 100 + row * 350, mMainPaint);
                //辅助信息
                canvas.drawText(mModeText[i],100 + 350 * line, 300 + row * 350,mTextPaint);
                canvas.drawCircle(100 + 350 * line, 100 + row * 350, 100, mDashPaint);
                canvas.drawRect(100 + 350 * line, 100 + row * 350, 100 + 200 + 350 * line, 100 + 200 + row * 350, mDashPaint);
            }
            canvas.restoreToCount(sc);
        }
    

    四、着色器:Shader(本节在Paint篇也有,为保全Color篇的完整性,这里cv了一下)

    一个很简单的类,有5个子类:

    Shader.png
    1.线性渐变:
    1).new LinearGradient(渐变起点x,y,渐变终点x,y,渐变色1,渐变色2,渐变模式)

    渐变模式:Shader.TileMode.[MIRROR|CLAMP|REPEAT] (图中很形象,就不解释了)

            int colorStart = Color.parseColor("#84F125");
            int colorEnd = Color.parseColor("#5825F1");
            canvas.save();
            canvas.translate(mCoo.x, mCoo.y);
            mRedPaint.setStyle(Paint.Style.FILL);
            mRedPaint.setShader(
                    new LinearGradient(
                            -200, 0, 200, 0,
                            colorStart, colorEnd,
                            Shader.TileMode.MIRROR
                    ));
            canvas.drawRect(-400,-200,400,-100,mRedPaint);
    
            canvas.translate(0, 150);
            mRedPaint.setShader(
                    new LinearGradient(
                            -100, 0, 100, 0,
                            colorStart, colorEnd,
                            Shader.TileMode.CLAMP
                    ));
            canvas.drawRect(-400,-200,400,-100,mRedPaint);
    
            canvas.translate(0, 150);
            mRedPaint.setShader(
                    new LinearGradient(
                            -100, 0, 100, 0,
                            colorStart, colorEnd,
                            Shader.TileMode.REPEAT
                    ));
            canvas.drawRect(-400,-200,400,-100,mRedPaint);
    
    线性渐变.png
    2).多色多点渐变:LinearGradient(渐变起点x,y,渐变终点x,y,颜色数组,位置百分点数组0~1,渐变模式)
    多色渐变.png
    int[] colors = new int[]{
            Color.parseColor("#F60C0C"),//红
            Color.parseColor("#F3B913"),//橙
            Color.parseColor("#E7F716"),//黄
            Color.parseColor("#3DF30B"),//绿
            Color.parseColor("#0DF6EF"),//青
            Color.parseColor("#0829FB"),//蓝
            Color.parseColor("#B709F4"),//紫
    };
    float[] pos = new float[]{
            1.f / 7, 2.f / 7, 3.f / 7, 4.f / 7, 5.f / 7, 6.f / 7, 1
    };
    
    canvas.translate(0, 150);
    mRedPaint.setShader(
            new LinearGradient(
                    -300, 0, 300, 0,
                    colors, pos,
                    Shader.TileMode.CLAMP
    
            ));
    canvas.drawRect(-400, -200, 400, -100, mRedPaint);
    

    2.径向渐变:RadialGradient
    1).两色渐变:RadialGradient(渐变中心,渐变半径,颜色1,颜色2,渐变模式)
    canvas.translate(mCoo.x, mCoo.y);
    int colorStart = Color.parseColor("#84F125");
    int colorEnd = Color.parseColor("#5825F1");
    mRedPaint.setStyle(Paint.Style.FILL);
    mRedPaint.setShader(
            new RadialGradient(
                   0,0,50,
                    colorStart, colorEnd,
                    Shader.TileMode.MIRROR
    
            ));
    
    canvas.drawCircle(0, 0, 150, mRedPaint);
    
    canvas.translate(350, 0);
    mRedPaint.setShader(
            new RadialGradient(
                    0,0,50,
                    colorStart, colorEnd,
                    Shader.TileMode.CLAMP
    
            ));
    canvas.drawCircle(0, 0, 150, mRedPaint);
    
    
    canvas.translate(350, 0);
    mRedPaint.setShader(
            new RadialGradient(
                    0,0,50,
                    colorStart, colorEnd,
                    Shader.TileMode.REPEAT
    
            ));
    canvas.drawCircle(0, 0, 150, mRedPaint);
    
    径像渐变.png
    2).多色多点径向渐变:

    RadialGradient(渐变中心,渐变半径,渐变模式,颜色数组,位置百分点数组0~1,渐变模式)

    多色径向渐变.png
    int[] colors = new int[]{
            Color.parseColor("#F60C0C"),//红
            Color.parseColor("#F3B913"),//橙
            Color.parseColor("#E7F716"),//黄
            Color.parseColor("#3DF30B"),//绿
            Color.parseColor("#0DF6EF"),//青
            Color.parseColor("#0829FB"),//蓝
            Color.parseColor("#B709F4"),//紫
    };
    float[] pos = new float[]{
            1.f / 7, 2.f / 7, 3.f / 7, 4.f / 7, 5.f / 7, 6.f / 7, 1
    };
    mRedPaint.setStyle(Paint.Style.FILL);
    mRedPaint.setShader(
            new RadialGradient(
                    0, 0, 200,
                    colors, pos,
                    Shader.TileMode.CLAMP
            ));
    canvas.drawCircle(0, 0, 250, mRedPaint);
    
    3.扫描渐变:SweepGradient

    这个要比上面的简单一点,没有渐变的模式
    双色扫描渐变:SweepGradient(中心点x,y,颜色1,颜色2)
    多色扫描渐变:SweepGradient(中心点x,y,颜色数组,位置百分点数组0~1)

    扫描渐变.png
    int colorStart = Color.parseColor("#84F125");
    int colorEnd = Color.parseColor("#5825F1");
    mRedPaint.setStyle(Paint.Style.FILL);
    mRedPaint.setShader(
            new SweepGradient(0, 0, colorStart, colorEnd));
    canvas.drawCircle(0, 0, 150, mRedPaint);
    
    canvas.translate(400, 0);
    int[] colors = new int[]{
            Color.parseColor("#F60C0C"),//红
            Color.parseColor("#F3B913"),//橙
            Color.parseColor("#E7F716"),//黄
            Color.parseColor("#3DF30B"),//绿
            Color.parseColor("#0DF6EF"),//青
            Color.parseColor("#0829FB"),//蓝
            Color.parseColor("#B709F4"),//紫
    };
    float[] pos = new float[]{
            1.f / 7, 2.f / 7, 3.f / 7, 4.f / 7, 5.f / 7, 6.f / 7, 1
    };
    mRedPaint.setShader(
            new SweepGradient(0, 0, colors, pos));
    canvas.drawCircle(0, 0, 150, mRedPaint);
    
    4.图片着色器:BitmapShader(图片,着色模式x,着色模式y)

    用图片的所有像素点作为画笔的颜色

    1).文字的图片底色:
    //加载图片,生成图片着色器
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.menu_bg);
    BitmapShader bs = new BitmapShader(bitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
    mRedPaint.setShader(bs);
    mRedPaint.setTextSize(150);
    mRedPaint.setStrokeWidth(10);
    mRedPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawText("张风捷特烈", 0, 500, mRedPaint);
    
    图片着色.png
    2)路径+图片着色器实现裁剪图片:路径Path相关知识见上一篇:
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.menu_bg);
    BitmapShader bs = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    mRedPaint.setShader(bs);
    
    mRedPaint.setStyle(Paint.Style.FILL);
    Path path = CommonPath.nStarPath(8, 500, 250);
    canvas.drawPath(path, mRedPaint);
    
    使用路径裁剪图片.png

    还有一个ComposeShader比较复杂,以后有需求会专门写一篇


    七、颜色过滤器:(Paint篇有,但本篇更加深入)

    ColorFilter只有三个子类
    颜色过滤器.png
    1.LightingColorFilter(颜色1,颜色2):
    LightingColorFilter测试.png
            Bitmap mainBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.menu_bg);
            mRedPaint.setStyle(Paint.Style.FILL);
            mRedPaint.setColorFilter(new LightingColorFilter(
                    Color.parseColor("#F00000"),//红
                    Color.parseColor("#0000ff")//蓝
            ));
            canvas.drawBitmap(mainBitmap, 0, 0, mRedPaint);
    
            canvas.translate(350, 0);
            mRedPaint.setColorFilter(new LightingColorFilter(
                    Color.parseColor("#FF0000"),//红
                    Color.parseColor("#00ff00")//绿
            ));
            canvas.drawBitmap(mainBitmap, 0, 0, mRedPaint);
    
            canvas.translate(350, 0);
            mRedPaint.setColorFilter(new LightingColorFilter(
                    Color.parseColor("#FF0000"),//红
                    Color.parseColor("#000000")//黑
            ));
            canvas.drawBitmap(mainBitmap, 0, 0, mRedPaint);
            canvas.restore();
    

    下面分析一下红蓝配的结果:打开LightingColorFilter源码:

        /**
         * 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.
    创建一个颜色过滤器:用mul颜色乘以RGB通道的颜色,再加上add颜色,mul和add的透明度将被忽略
         */
        public LightingColorFilter(@ColorInt int mul, @ColorInt int add) {
            mMul = mul;
            mAdd = add;
        }
        
    //看了没什么感觉,又是native的方法,往上一看,有注释
     * Given a source color RGB, the resulting R'G'B' color is computed thusly:
     * R' = R * colorMultiply.R + colorAdd.R  
     * G' = G * colorMultiply.G + colorAdd.G
     * B' = B * colorMultiply.B + colorAdd.B
    

    这下明白了,就是颜色变换嘛----草稿纸准备好,要演算了:
    注意:当相乘数大于255时,便会溢出,相当于8位容不下那么多数,后面再进来,前面的就被推出来了
    这里为了区别,特意用#F00000来测试,结果有一点点偏差,毕竟两次选点的点位可能有偏差

    颜色运算.png

    活了这么大,第一次对颜色进行乘法和加法,对于一张图片,加上绿色就是对每个像素点进行这样的运算

    2.PorterDuffColorFilter(颜色,模式--PorterDuff.Mode):

    PorterDuff.Mode是不是很熟悉,看上面的叠加模式吧

    PorterDuffColorFilter测试.png
    Bitmap mainBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.menu_bg);
    mRedPaint.setStyle(Paint.Style.FILL);
    
    mRedPaint.setColorFilter(new PorterDuffColorFilter(
            Color.parseColor("#0000ff"), PorterDuff.Mode.DARKEN));
    canvas.drawBitmap(mainBitmap, 0, 0, mRedPaint);
    
    canvas.translate(350, 0);
    mRedPaint.setColorFilter(new PorterDuffColorFilter(
            Color.parseColor("#0000ff"),PorterDuff.Mode.LIGHTEN
    ));
    canvas.drawBitmap(mainBitmap, 0, 0, mRedPaint);
    
    canvas.translate(350, 0);
    mRedPaint.setColorFilter(new PorterDuffColorFilter(
            Color.parseColor("#0000ff"),PorterDuff.Mode.SCREEN
    ));
    canvas.drawBitmap(mainBitmap, 0, 0, mRedPaint);
    
    canvas.translate(350, 0);
    mRedPaint.setColorFilter(new PorterDuffColorFilter(
            Color.parseColor("#0000ff"),PorterDuff.Mode.OVERLAY
    ));
    canvas.drawBitmap(mainBitmap, 0, 0, mRedPaint);
    
    3.ColorMatrixColorFilter(颜色变换矩阵或20个float数)

    本文的重中之重便是ColorMatrix:

    它是有一个5*4的矩阵对某个颜色进行运算,是不是有种众星捧月的但觉,没错,20个数,是不是很开心

    颜色矩阵.png
    1.关闭RGB颜色通道(变为黑色)

    颜色ARBG占了int的四个字节,所以不可能是负数,至于如何处理负数,要看ColorMatrix的处理
    测试了一下,应该是0,ARGB都没了

    斜对角-1.jpg test-1.png

    设为1后,结果[-R,-G,-B,A],黑色,符合预期:

    test1.png
    2.关闭RGB颜色通道(变为黑色),后偏移红色255

    由于只有G、B不通,所以显示是不同的红色

    红色.jpg 只过滤出红色.png
    3.关闭RGB颜色通道(变为黑色),后偏移蓝色255
    -1,0,0,0,0
    0,-1,0,0,0
    0,0,-1,0,255
    0,0,0,1,0
    
    只过滤出蓝色.png
    4.关闭RGB颜色通道(变为黑色),后偏移三色255
    -1,0,0,0,255
    0,-1,0,0,255
    0,0,-1,0,255
    0,0,0,1,0
    
    反色.png
    5.调节亮度:增加RGB的偏移颜色(-255~255)
    亮度调节 亮度调节.png
    6.灰度
    //只要把RGB三通道的色彩信息设置成一样:即:R=G=B,
    //为了保证图像亮度不变,同一个通道中的R+G+B=1
    0.3086, 0.6094, 0.0820, 0, 0
    0.3086, 0.6094, 0.0820, 0, 0
    0.3086, 0.6094, 0.0820, 0, 0
    0    ,  0    ,  0    ,  1, 0
    
    灰度.png
    7.饱和度:(这里我乱调的,可参考色彩方面的书)
    饱和度测试.png
    (R-1)*X + 1, G*X    ,       B*X    ,        0, 0,
    R*X   ,     (G-1)*X + 1,    B*X    ,        0, 0,
    R*X   ,     G*X      ,      (B-1)*X + 1,    0, 0,
    0     ,     0        ,      0        ,      1, 0 
    
    
    R=0.3086,G=0.6094,B=0.0820
    
        /**
         * 饱和度调节
         * @param R 红色保留比
         * @param G 绿色保留比
         * @param B 蓝色保留比
         * @param X 值越小越饱和----0为原图
         * @return
         */
        private float[] colorM(float R, float G, float B, float X) {
          float[] array=  new float[]{
                    (R - 1) * X + 1, G * X, B * X, 0, 0,
                    R * X, (G - 1) * X + 1, B * X, 0, 0,
                    R * X, G * X, (B - 1) * X + 1, 0, 0,
                    0, 0, 0, 1, 0
    
            };
            return array;
        }
    
    

    8.对比度:
    对比度测试.png
    X,0,0,0,128*(1-X)       R       X*R+128*(1-X)
    0,X,0,0,128*(1-X)   *   G       G*R+128*(1-X)
    0,0,X,0,128*(1-X)       B  =    B*R+128*(1-X)
    0,0,0,1,0               A       A
                            1
    
    private float[] colorM(float X) {
        float[] array = new float[]{
                X, 0, 0, 0, 128 * (1 - X),
                0, X, 0, 0, 128 * (1 - X),
                0, 0, X, 0, 128 * (1 - X),
                0, 0, 0, 1, 0
        };
        return array;
    }
    

    安卓自带的图片处理API

    public void setSaturation(float sat) {
        reset();
        float[] m = mArray;
    
        final float invSat = 1 - sat;
        final float R = 0.213f * invSat;
        final float G = 0.715f * invSat;
        final float B = 0.072f * invSat;
    
        m[0] = R + sat; m[1] = G;       m[2] = B;
        m[5] = R;       m[6] = G + sat; m[7] = B;
        m[10] = R;      m[11] = G;      m[12] = B + sat;
    }
    
    mCmx.setSaturation(folat );
    
    色彩饱和度.gif

    终于写完了,完结散花。


    后记:捷文规范

    1.本文成长记录及勘误表
    项目源码 日期 备注
    V0.1--无 2018-11-10 Android关于Color你所知道的和不知道的一切
    2.更多关于我
    笔名 QQ 微信 爱好
    张风捷特烈 1981462002 zdl1994328 语言
    我的github 我的简书 我的CSDN 个人网站
    3.声明

    1----本文由张风捷特烈原创,转载请注明
    2----欢迎广大编程爱好者共同交流
    3----个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正
    4----看到这里,我在此感谢你的喜欢与支持

    相关文章

      网友评论

        本文标题:Android关于Color你所知道的和不知道的一切

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