自定义View-第十八步:ColorMatrix

前言

根据启舰大大 的博客所学习的自定义View。

ColorMatrix

色彩矩阵

注意:对于色彩变换矩阵,这里的色彩顺序是R、G、B、A而不是A、R、G、B!!!

但是,ColorMatrix是五阶矩阵,WHY?

使用四阶的色彩变换矩阵来修改色彩,只能够对色彩的每一个分量值进行乘(除)运算,如果要对这些分量值进行加减法的运算(平移变换),只能通过五阶矩阵来完成。
考虑下面这个变换:
1、红色分量值更改为原来的2倍;
2、绿色分量增加100;
则使用4阶矩阵的乘法无法实现,所以,应该在四阶色彩变换矩阵上增加一个“哑元坐标”,来实现所列的矩阵运算:


如果想不通,手动算一下就OK啦
添加一下矩阵运算的回顾,嘿嘿


A矩阵的列数必须与B矩阵的行数相同,才能相乘!因为我们需要把A中的一行中的各个数字与B矩阵中的一列中的各个数字分别相乘,所以A的列数与B的行数必须相同才行!
矩阵A乘以矩阵B和矩阵B乘以矩阵A的结果必然是不一样的。

ColorMatrics示例

//构造函数
ColorMatrix()  
ColorMatrix(float[] src)  
ColorMatrix(ColorMatrix src)  //利用另一个ColorMatrix实例来复制一个一样的ColorMatrix对象
//设置重置函数
public void set(ColorMatrix src)  
public void set(float[] src)  
public void reset() 
//返回当前ColorMatrics对象中的所保存的矩阵
public float[] getArray()

1. 蓝色通道输出

      paint.setColorFilter(null);
        //原图
        canvas.drawBitmap(bitmap,null,new RectF(0,0,bitmap.getWidth(),bitmap.getHeight()),paint);
        canvas.translate(bitmap.getWidth()+100,0);
        //色彩矩阵,切记是RGBA
        ColorMatrix colorMatrix = new ColorMatrix(new float[]{
                0,0,0,0,0,
                0,0,0,0,0,
                0,0,1,0,0,
                0,0,0,1,0,
        });
        paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        //蓝色通道输出
        canvas.drawBitmap(bitmap,null,new RectF(0,0,bitmap.getWidth(),bitmap.getHeight()),paint);
蓝色通道效果图

2. 在色彩变换矩阵的最后一行加上某个值,增加特定色彩的饱和度

 ColorMatrix colorMatrix = new ColorMatrix(new float[]{
                1,0,0,0,0,
                0,1,0,0,50,
                0,0,1,0,0,
                0,0,0,1,0,
        });

效果图

3. 色彩反转/反相功能:色彩反转就是求出每个色彩的补值来做为目标图像的对应颜色值

 ColorMatrix colorMatrix = new ColorMatrix(new float[]{
                -1, 0, 0, 0, 255,
                0, -1, 0, 0, 255,
                0, 0, -1, 0, 255,
                0, 0, 0, 1, 0,
        });


4. 色彩缩放变换:在色彩矩阵对角线上的分别代表R、G、B、A的几个值,将其分别乘以指定的值

  ColorMatrix colorMatrix = new ColorMatrix(new float[]{
                1.2f,0,0,0,0,
                0,1.2f,0,0,0,
                0,0,1.2f,0,0,
                0,0,0,1.2f,0,
        });

4. 色彩的投射运算

  • 灰白照片
ColorMatrix colorMatrix = 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,  
});  
效果图

这个值是google最终给我们的颜色值。

  • 照片变旧
ColorMatrix colorMatrix = 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  
}); 
来自http://blog.csdn.net/harvic880925/article/details/51187277

下面开始,就是使用各种方法啦

5. setSaturation——设置饱和度

//整体增强颜色饱和度,即同时增强R,G,B的色彩饱和度  
public void setSaturation(float sat)  
  • float sat:表示把当前色彩饱和度放大的倍数;取值为0表示完全无色彩,即灰度图像(黑白图像);取值为1时,表示色彩不变动;当取值大于1时,显示色彩过度饱和
    直接上代码⤵️
    <ImageView
        android:layout_centerInParent="true"
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop"
        />
    <SeekBar
        android:layout_marginTop="10dp"
        android:layout_below="@id/img"
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="30dp"/>
     SeekBar seek = (SeekBar) findViewById(R.id.seekbar);
        final ImageView img = (ImageView) findViewById(R.id.img);
        seek.setMax(20);
        seek.setProgress(1);

        mOriginBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        mTempBmp = Bitmap.createBitmap(mOriginBmp.getWidth(), mOriginBmp.getHeight(), Bitmap.Config.ARGB_8888);

        seek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                handleColorMatriBmp(progress);
                img.setImageBitmap(mTempBmp);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

    private void handleColorMatriBmp(int progress) {
        Canvas canvas = new Canvas(mTempBmp);//得到画笔对象,用于绘制调色后的图片
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        ColorMatrix colorMatrix = new ColorMatrix();
        colorMatrix.setSaturation(progress);
        paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        canvas.drawBitmap(mOriginBmp, 0, 0, paint);
    }
效果图

**6. setScale——色彩缩放 **

public void setScale(float rScale, float gScale, float bScale,float aScale)  //分别对应R,G,B,A颜色值的缩放倍数
     Canvas canvas = new Canvas(mTempBmp);//得到画笔对象,用于绘制调色后的图片
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        ColorMatrix colorMatrix = new ColorMatrix();
        colorMatrix.setScale(1,1.3f,1,1);//将绿色放大1.3倍
        paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        canvas.drawBitmap(mOriginBmp, 0, 0, paint);

效果图

7. setRotate——色彩旋转

/** 
 * 将旋转围绕某一个颜色轴旋转 
 * axis=0 围绕红色轴旋转 
 * axis=1 围绕绿色轴旋转 
 * axis=2 围绕蓝色轴旋转 
 */  
public void setRotate(int axis, float degrees);  
  • int axis:表示围绕哪个轴旋转,取值为0,1,2;取0时表示围绕红色轴旋转;取值1时,表示围绕绿色轴旋转;取值2时,表示围绕蓝色轴旋转;
  • float degrees:表示旋转的度数

举个栗子

    seek.setMax(360);
        seek.setProgress(180);

        mOriginBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        mTempBmp = Bitmap.createBitmap(mOriginBmp.getWidth(), mOriginBmp.getHeight(), Bitmap.Config.ARGB_8888);

        seek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                handleColorMatriBmp(progress);
                img.setImageBitmap(mTempBmp);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

    private void handleColorMatriBmp(int progress) {
        Canvas canvas = new Canvas(mTempBmp);//得到画笔对象,用于绘制调色后的图片
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        ColorMatrix colorMatrix = new ColorMatrix();
        colorMatrix.setRotate(2,progress-180);//围绕蓝色轴旋转,度数是-180度 ~ +180度
        paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        canvas.drawBitmap(mOriginBmp, 0, 0, paint);
    }
效果图
  1. 在将蓝色轴做为Z轴,仅在红—绿平面上旋转a度的情况,即绕蓝色轴旋转a度



    对应的色彩变换矩阵:


  2. 绕红色轴旋转a度


对应的色彩变换矩阵:


3.绕绿色轴旋转a度



对应的色彩变换矩阵是


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

推荐阅读更多精彩内容