两个半透明颜色色的叠加计算方法

简介:

讲 Alpha 混合的文章太多了,我并非要说有什么新的更好的算法,而是这些 Alpha 混合的文章都是基于一种特定的现实应用:在背景色上叠加一个半透明色。而 OpenPainter 的需求更具一般性:混合两个半透明颜色。也就是说,原始色也是有透明度的。

为此我首先用 PS 做了不少试验,试图推导出 Alpha 混合的公式。其实,一些简单的实验外加一些逻辑推理,成功了找到了 Alpha 混合的方法。这里为了计算上的方便,全部颜色分量值的取值范围都是 0 ~ 1。

首先是透明度值的计算。颜色在本质上是光的产物,假设把透明度理解为玻璃的透光性,则一切就变得很easy。比如一个 alpha = 0.2 的颜色,就能够将其想像为透光率为 80% 的彩色玻璃。我们透过这块玻璃看去,因为 80% 的光都透过了,因此留下来的颜色仅仅剩 20%,即所谓 0.2 的 alpha。如今我们来做一个混合:将 alpha 为 0.2 和 0.6 的颜色进行叠加。这时,我们有了两块玻璃,一块透光率为 80%,还有一块为 40%。一道光束穿过,经过 80% 透光率的玻璃时,光线强度剩下 80%,再经过 40% 透光率的玻璃时,光线进一步被削弱,仅仅剩下 80% * 40% = 32%。这意味着有 32% 的透明性,即 alpha = 0.68。

总结上面的算法,我们能够得出:

alpha

下一步,是依据已有的透明度来计算每一个通道的颜色分量。这其有用数学推导的方法更easy一些。我们已经知道,在背景色上怎样叠加半透明色,其 RGB 颜色分量的计算方法为:

solid_and_alpha

那么,我们能够通过在背景色上叠加两个半透明颜色的不同方法来进行公式推导。第一种叠加方式:先在背景色上叠上第一个半透明颜色,再在叠好的结果上叠上第二个半透明颜色;另外一种方式则是先将两个半透明颜色叠好,再与背景色混合。即:

two_methods

这两种混合方式的结果应当是全然一致的,则有

image

整理,得

image

这即是 RGB 模式下的 Alpha 混合公式。对于 CMYK 等其它模式,也能够用类似的方式推导。

本文转自博客园知识天地的博客,原文链接:两个半透明颜色色的叠加计算方法,如需转载请自行联系原博主。

相关文章
|
定位技术 索引
基于Amos路径分析的输出结果参数详解
基于Amos路径分析的输出结果参数详解
2094 2
|
前端开发 JavaScript 测试技术
前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘
有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入。的确,这对用户来说很方便。但真正用HTML5页面去实现的时候,却遇到了问题。 首先我做了这样一个demo。 ``` Title #input1{
4282 0
|
Ubuntu 前端开发 Linux
通过Ftrace实现高效、精确的内核调试与分析(上)
通过Ftrace实现高效、精确的内核调试与分析
|
Swift iOS开发
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
|
存储 缓存 网络协议
了解 ARP 系列 – ARP、inARP、GARP 和 RARP
了解 ARP 系列 – ARP、inARP、GARP 和 RARP
1026 4
|
前端开发 JavaScript
async和await的错误处理
在TypeScript中,`async`和`await`是处理异步操作的语法糖,能够让异步代码看起来像同步代码。`async`函数返回的总是`Promise`对象。当`await`后跟的表达式为`reject`状态的`Promise`时,会抛出错误,需要通过`try/catch`、链式`.catch()`或外部`Promise`包装来处理错误,防止代码崩溃。
634 0
async和await的错误处理
|
人工智能 安全 搜索推荐
AI智能体研发之路-模型篇(三):中文大模型开、闭源之争
AI智能体研发之路-模型篇(三):中文大模型开、闭源之争
1172 1
如何在不越狱的情况下,获取app中的所有常用文件和文件夹
如何在不越狱的情况下,获取app中的所有常用文件和文件夹
945 1
|
资源调度 数据可视化
用二元泊松模型预测2022年世界杯淘汰赛结果
双泊松模型有一个严重的缺陷,那就是它假设比赛中两队的比分是条件独立的。而我们都知道,在对抗性比赛中,两队的比分是存在关联的,双泊松模型可以描述比分的这种关联性,提高了比赛结果预测的准确度。
1183 1
用二元泊松模型预测2022年世界杯淘汰赛结果

热门文章

最新文章