zoukankan      html  css  js  c++  java
  • 两个半透明颜色色的叠加计算方法

    讲 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 等其它模式,也能够用类似的方式推导。

  • 相关阅读:
    Filter的基本配置
    11.3、4(filter的生命周期和API)、
    11.1(过滤器概述)、(创建过滤器filter)
    10.6商品的促销活动,(未解决)
    php 调用常量或者变量的时候千万不能加引号""'' 不然不生效
    thinkphp5 if else的表达式怎么写?
    request() 获取参数是数组不是对象
    thinkphp5 PATHINFO路由正确的访问方式
    thinkphp5 的iframe文件怎么显示到html里面
    thinkphp5引入外部css js文件
  • 原文地址:https://www.cnblogs.com/mfryf/p/3401503.html
Copyright © 2011-2022 走看看