约定
- 这里只讨论显示器的颜色, 也就是加法混色算法
- 两个颜色叠加, 至少有一个颜色是有透明度的, 不然一点都不透明的话, 下面的颜色就看不见了
- 颜色模型是rgb模型,
-
为了简化计算, argb四个通道的值范围定为0~1
rgb-color-model-visible-spectrum-color-space-png-favpng-VcwRvnSFWbjZWxJvUhccwrWKp.jpg
imgbin-rgb-color-model-color-theory-color-wheel-cmyk-color-model-yellow-gradient-axAck5CzGkJVSJHqdDP4V3N3b.jpg
RGB-colour-model.jpg
定义变量
- 前景色 c1, argb通道: a1, r1, g1, b1
- 背景色 c2, argb通道: a2, r2, g2, b2
- 叠加后的颜色 c3, argb通道: a3, r3, g3, b3
颜色实体
把颜色想象成为, 一个有颜色的玻璃, 且玻璃可以调节反射率,
比如玻璃反射0.5, 那么剩下的0.5就是折射, 反射率 + 折射率 = 1
两个颜色叠加模型
颜色叠加模型_水印.png
计算叠加颜色的数值
靠近眼睛的玻璃板令其颜色为蓝色, 代号玻璃1号, 玻璃反射率为0.5, 折射率为0.5
远离眼睛的玻璃板令其颜色为红色, 代号玻璃2号, 玻璃反射率为0.5, 折射率为0.5
玻璃颜色数值
玻璃1号: a1: 0.5, r1: 1, g1: 0, b1: 0
玻璃2号: a2: 1, r2: 0, g2: 0, b2: 1
R通道
玻璃1号的R通道值是0
玻璃2号的R通道值是1
首先, 玻璃2号反射率为1, 反射了所有的红色, 然后通过玻璃2号, 折射0.5的红, 射到眼睛里;
然后, 玻璃1号R通道值为0
射到眼睛里R通道的值是 0.5 + 0 = 0.5
G通道
玻璃1号的G通道值是0
玻璃2号的G通道值是0
射到眼睛里G通道的值是 0 + 0 = 0
B通道
玻璃1号的B通道值是1
玻璃2号的B通道值是0
首先, 玻璃2号B通道值是0;
然后, 玻璃1号反射0.5的蓝, 射到眼睛里
射到眼睛里B通道的值是 0 + 0.5 = 0.5
射到眼睛里的颜色
R: 0.5
G: 0
B: 0.5
各乘255, 后是127, 0, 127,
image.png
计算出来的颜色和ps的颜色对比
image.png
完美
两者不能说一模一样, 简直一模一样
随机的颜色叠加
我们随机两个颜色
玻璃颜色数值
玻璃1号: r1: 0.3, g1: 0.4, b1: 0.5, 反射率0.2, 折射率0.8
玻璃2号: r2: 0.6, g2: 0.7, b2: 0.8, 反射率1.0, 折射率0.0
R通道
玻璃1号的R通道值是0.3
玻璃2号的R通道值是0.6
首先, 玻璃2号反射率为1, 反射了0.6的红色, 然后通过折射率为0.8的玻璃1号, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.3的红通过反射率为0.2的玻璃1号, 射到眼睛里
射到眼睛里R通道的值是
玻璃2号: 0.6 * 0.8
玻璃1号: 0.3 * 0.2
射到眼睛里的R通道的总值: (0.6 * 0.8) + (0.3 * 0.2) = 0.48 + 0.06 = 0.54
G通道
玻璃1号的G通道值是0.4
玻璃2号的G通道值是0.7
首先, 玻璃2号反射率为1, 反射了0.7的绿色, 然后通过玻璃1号, 折射0.8的绿, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.4的绿通过反射率为0.2的玻璃1号, 射到眼睛里
射到眼睛里G通道的值是
玻璃2号: 0.7 * 0.8
玻璃1号: 0.4 * 0.2
射到眼睛里的G通道的总值: (0.7 * 0.8) + (0.4 * 0.2) = 0.56 + 0.08 = 0.64
B通道
玻璃1号的B通道值是0.5
玻璃2号的B通道值是0.8
首先, 玻璃2号反射率为1, 反射了0.8的蓝色, 然后通过玻璃1号, 折射0.8的蓝, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 0.8的蓝通过反射率为0.2的玻璃1号, 射到眼睛里
射到眼睛里B通道的值是
玻璃2号: 0.8 * 0.8
玻璃1号: 0.5 * 0.2
射到眼睛里的B通道的总值: (0.8 * 0.8) + (0.5 * 0.2) = 0.64 + 0.1 = 0.74
射到眼睛里的颜色
R: 0.54
G: 0.64
B: 0.74
各乘255, 后是137.7, 163.2, 188.7
不能有小数, 四舍五入
138, 163, 189
image.png
计算出来的颜色和ps的颜色对比
玻璃1号: r1: 0.3, g1: 0.4, b1: 0.5, 反射率0.2, 折射率0.8
玻璃2号: r2: 0.6, g2: 0.7, b2: 0.8, 反射率1.0, 折射率0.0
玻璃1号颜色: 76.5, 102, 127.5
玻璃2号颜色: 153, 178.5, 204
取整四舍五入
玻璃1号颜色: 77, 102, 128
玻璃2号颜色: 153, 179, 204
ps的颜色是138, 164, 189
image.png
完美
两者不能说一模一样, 简直一模一样
先用255换算颜色值, 再叠加颜色
G通道
玻璃1号的G通道值是0.4, 乘以255等于102
玻璃2号的G通道值是0.7, 乘以255等于178.5, 四舍五入等于179
首先, 玻璃2号反射率为1, 反射了179的绿, 然后通过折射率为0.8的玻璃1号, 射到眼睛里;
然后, 玻璃1号反射率为0.2, 折射率为0.8, 102的绿通过反射率为0.2的玻璃1号, 射到眼睛里
射到眼睛里R通道的值是
玻璃2号: 179 * 0.8
玻璃1号: 102 * 0.2
射到眼睛里的R通道的总值: (179 * 0.8) + (102 * 0.2) = 143.2 + 20.4 = 163.6 = 164
完美
两者一模一样
总结
虽然你看见的只有这一篇文章, 但是我看了很多帖子, 颜色叠加模型也想了好几种, 推翻重来了好多次,
最终终于实现了和ps一样的颜色叠加效果, 我非常满意, 你能看懂我写的吗? 我觉的我写的非常详细了
参考
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
网友评论