零, 前言
1. 做安卓的大多应该对颜色不太敏感, 毕竟咱是敲代码的, 颜色有设计师呢.
2. 不过作为一名在大学被颜色熏 (陶) 过四年的人, 对颜色多少还是挺亲切的(虽然当时挺讨厌的)
3. 纪念也好, 记录也罢, 为它写篇总结也理所应当
4. 如果你觉得并不需要了解关于颜色的知识, 那你可以将本文当做一篇科普文(出去跟人家吹吹牛还是够用的)
一, 颜色知识科普:
这一切都要从光开始:
有个叫牛顿的人拿一块三棱镜将太阳光折射出了彩色产生色散现象:
---- 色散现象说明光在介质中的速度 v=c/n(或折射率 n)随光的频率 f 而变, 从而: 证明了光具有波动性
光的色散 | 光的色散图示 |
---|---|
关于黑与白
问: 如果把所有非黑的颜料混合, 会得到什么?---- 感觉一团糟, 应该是黑色吧
问: 如果把所有非白的光混合, 会得到什么?---- 感觉越来越亮, 应该是白色吧
为何光的叠加和颜料的叠加会产生相反的效果?
从一开始, 这个问题就困扰着我, 也将一直困扰这我...
如果说[肉眼所见到的光线, 是由波长范围很窄的电磁波产生的, 不同波长的电磁波表现为不同的颜色],
那光的叠加也就是波的叠加, 貌似有个 [波动方程] 吧... 只能这样说服自己:
光色叠加是减色模式: 会越来约 "淡"
颜料色叠加是加色模式: 会越来约 "浓"
色彩模式
1.RGB: 设备相关的颜色模型
安卓敲代码的多少都用过 #ffff00 表示黄色吧, 这是 RGB 的一种表现形式
你也可以用 "R:255,G:255,B:0" 来表示黄色, 其实两者是一个意思, 只不过是 10 进制和 16 进制的转化
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 门(俗称: 红色通道关闭), 从表现上来看最终颜色不带红色, 如下下图
为什么编程里用 int 作为颜色?
众所周知: 一个 int 占 4 个字节, 也就是 4*8 个位, 刚好用来盛放 ARGB_8888.
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.
5. 看一下黄色的几种表达方式:
- 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. 常量:
2. 构造函数
可见只有无参数构造可以用
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 = 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 获取任意像素点, 并修改它, 对与某像素点而言, 颜色信息是其主要的部分
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);
三, Xfermode: 图片叠合时的处理方式
终于写到这里了, 总算与 Xfermode 相遇了, 最喜欢分析很多的情况, 这里有 18 种模式, 想想都激动....
做开发的, 我们应该知道 src 和 dst 吧 src 是源, dst 是目标, 在 react 里就有 src 的源文件, 和 dest 的输出文件
图片叠合顾名思义, 必须有两个图片才行, 这里原图 src 用蓝色正方形, 目标 dst 用绿色圆形
1.src 和 dst 图片
- /**
- * 创建源图片
- *
- * @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 的透明度, 显示的更清楚些
注意: 看正方形框里的内容, 看正方形框里的内容, 看正方形框里的内容! 因为它是被叠合的对象
- 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 个子类:
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);
2). 多色多点渐变: LinearGradient(渐变起点 x,y, 渐变终点 x,y, 颜色数组, 位置百分点数组 0~1, 渐变模式)
- 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);
2). 多色多点径向渐变:
RadialGradient(渐变中心, 渐变半径, 渐变模式, 颜色数组, 位置百分点数组 0~1, 渐变模式)
- 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)
- 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);
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);
还有一个 ComposeShader 比较复杂, 以后有需求会专门写一篇
七, 颜色过滤器:(Paint 篇有, 但本篇更加深入)
ColorFilter 只有三个子类
1.LightingColorFilter(颜色 1, 颜色 2):
- 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 来测试, 结果有一点点偏差, 毕竟两次选点的点位可能有偏差
活了这么大, 第一次对颜色进行乘法和加法, 对于一张图片, 加上绿色就是对每个像素点进行这样的运算
2.PorterDuffColorFilter(颜色, 模式 --PorterDuff.Mode):
PorterDuff.Mode 是不是很熟悉, 看上面的叠加模式吧
- 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 个数, 是不是很开心
1. 关闭 RGB 颜色通道(变为黑色)
颜色 ARBG 占了 int 的四个字节, 所以不可能是负数, 至于如何处理负数, 要看 ColorMatrix 的处理
测试了一下, 应该是 0,ARGB 都没了
设为 1 后, 结果[-R,-G,-B,A], 黑色, 符合预期:
2. 关闭 RGB 颜色通道(变为黑色), 后偏移红色 255
由于只有 G,B 不通, 所以显示是不同的红色
3. 关闭 RGB 颜色通道(变为黑色), 后偏移蓝色 255
- -1,0,0,0,0
- 0,-1,0,0,0
- 0,0,-1,0,255
- 0,0,0,1,0
4. 关闭 RGB 颜色通道(变为黑色), 后偏移三色 255
- -1,0,0,0,255
- 0,-1,0,0,255
- 0,0,-1,0,255
- 0,0,0,1,0
5. 调节亮度: 增加 RGB 的偏移颜色(-255~255)
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
7. 饱和度:(这里我乱调的, 可参考色彩方面的书)
- (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. 对比度:
- 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 );
终于写完了, 完结散花.
后记: 捷文规范
1. 本文成长记录及勘误表
项目源码 | 日期 | 备注 |
---|---|---|
V0.1-- 无 | 2018-11-10 | Android 关于 Color 你所知道的和不知道的一切 https://www.jianshu.com/p/41862437cd04 |
2. 更多关于我
笔名 | 微信 | 爱好 | |
---|---|---|---|
张风捷特烈 | 1981462002 | zdl1994328 | 语言 |
我的 github https://github.com/toly1994328 | 我的简书 https://www.jianshu.com/u/e4e52c116681 | 我的 CSDN https://blog.csdn.net/qq_30447263 | 个人网站 http://www.toly1994.com |
3. 声明
1---- 本文由张风捷特烈原创, 转载请注明
2---- 欢迎广大编程爱好者共同交流
3---- 个人能力有限, 如有不正之处欢迎大家批评指证, 必定虚心改正
4---- 看到这里, 我在此感谢你的喜欢与支持
来源: https://juejin.im/post/5be676d3e51d4535b07d1bf6