本文转载自：https://www.jianshu.com/p/41862437cd04
作者：张风捷特烈
1.做安卓的大多应该对颜色不太敏感，毕竟咱是敲代码的,颜色有设计师呢。
2.不过作为一名在大学被颜色熏(陶)过四年的人，对颜色多少还是挺亲切的(虽然当时挺讨厌的)
3.纪念也好,记录也罢，为它写篇总结也理所应当
4.如果你觉得并不需要了解关于颜色的知识，那你可以将本文当做一篇科普文(出去跟人家吹吹牛还是够用的)。
一、颜色知识科普：
色彩模式
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个数，是不是很开心
要想改变一张图片的颜色效果，只需要改变图像的颜色分量矩阵即可。通过颜色矩阵可以很方便的修改图像的颜色分量矩阵。假设修改后的图像颜色分量矩阵为C1，则有如下图所示的颜色分量矩阵计算公式。
矩阵的运算规则是：矩阵M的一行乘以矩阵C的一列作为矩阵R的一行。 M是颜色矩阵，C矩阵是图片中包含的RGBA信息，R矩阵是用M应用于C之后的新的颜色分量。
由此可见，通过颜色矩阵修改了原图像的RGBA值，从而达到了改变图片颜色效果的目的。并且，通过上图所示的运算可知，颜色矩阵M的第一行参数abcde决定了图像的红色成分，第二行参数fghij决定了图像的绿色成分，第三行参数klmno决定了图像的蓝色成分，第四行参数pqrst决定了图像的透明度，第五列参数ejot是颜色的偏移量。
通常，改变颜色分量时可以通过修改第5列的颜色偏移量来实现，如下图所示的颜色矩阵M1，通过计算后可以得知该颜色矩阵的作用是使图像的红色分量和绿色分量均增加100，这样的效果就是图片泛黄（因为红色与绿色混合后得到黄色）。
除此之外，也可以通过直接对颜色值乘以某一系数而达到改变颜色分量的目的。如下图所示的颜色矩阵M2，将绿色分量放大了2倍，这样的效果就是图片泛绿色。
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
终于写完了，完结散花。
扫一扫
9875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
