以数学方式计算不透明度值

Posted

技术标签:

【中文标题】以数学方式计算不透明度值【英文标题】:Calculating opacity value mathematically 【发布时间】:2012-02-03 08:02:46 【问题描述】:

不透明度是如何数学计算的?

在 Photoshop、CSS 等中有 opacity 值。实际上这个 opacity 是图层的透明行为。我们都知道。 但它是如何数学计算的呢?有什么公式可以计算不透明度吗?

通过设置不透明度值,那里发生了什么?

以纯色层为例:Layer 1(前景层)和Layer 2(背景层)

第 1 层是红色(例如颜色值 A),第 2 层是白色(例如颜色值 B)。

当我们将不透明度(比如p)设置为第 1 层时,我们可以设置 0.5 或 50% 并获得白色红色(比如颜色值 X)。

为了得到这个值X 我应该在数学上做什么?

即。

X = (things which will be a relation containing p, A and B)

我想知道找到X的确切数学方程式。

另外,如果我有方程式,并且颜色值本质上是十六进制的,那么使用十六进制计算器可以得到正确的结果吗?

【问题讨论】:

【参考方案1】:

C1 = (R1,G1,B1)C2 = (R2,G2,B2)组合成新颜色的公式C3,其中C2 覆盖在 C1 之上,不透明度 p 通常为( (1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2 )

更多信息请参见Wikipedia article on transparency。

【讨论】:

【参考方案2】:

下面的javascript给出了一种可以手动计算不透明度颜色值的方法:

    function calculateTransparentColor(foregroundColor, backgroundColor, opacity) 
        if (opacity < 0.0 || opacity > 1.0) 
            alert("assertion, opacity should be between 0 and 1");
        
        opacity = opacity * 1.0; // to make it float
        let foregroundRGB = colorHexToRGB(foregroundColor);
        let backgroundRGB = colorHexToRGB(backgroundColor);
        let finalRed = Math.round(backgroundRGB.r * (1-opacity) + foregroundRGB.r * opacity);
        let finalGreen = Math.round(backgroundRGB.g * (1-opacity) + foregroundRGB.g * opacity);
        let finalBlue = Math.round(backgroundRGB.b * (1-opacity) + foregroundRGB.b * opacity);
        return colorRGBToHex(finalRed, finalGreen, finalBlue);
    

    var COLOR_REGEX = /^#([0-9a-fA-F]2)([0-9a-fA-F]2)([0-9a-fA-F]2)$/;
    function colorHexToRGB(htmlColor) 
         
        let arrRGB = htmlColor.match(COLOR_REGEX);
        if (arrRGB == null) 
            alert("Invalid color passed, the color should be in the html format. Example: #ff0033");
        
        let red = parseInt(arrRGB[1], 16);
        let green = parseInt(arrRGB[2], 16);
        let blue = parseInt(arrRGB[3], 16);
        return "r":red, "g":green, "b":blue;
    

    function colorRGBToHex(red, green, blue) 
        if (red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255) 
            alert("Invalid color value passed. Should be between 0 and 255.");
        

        let hexRed = formatHex(red.toString(16));
        let hexGreen = formatHex(green.toString(16));
        let hexBlue = formatHex(blue.toString(16));

        return "#" + hexRed + hexGreen + hexBlue;
    

    function formatHex(value) 
        value = value + "";
        if (value.length == 1) 
            return "0" + value;
        
        return value;
    

    // Now we test it!
    let theColor = calculateTransparentColor('#ff0000', '#00ff00', 0.5)
    console.log("The color #ff0000 on a background of #00ff00 with 50% opacity produces: " + theColor);


    

【讨论】:

谢谢! jsbin.com/OxEPEqo/2/edit -- 我需要相反的,即第二组输入。 caculateTransparentColor 方法似乎已翻转了前景和背景。这是foreground * opacity,而不是foreground * (1 - opacity)。已提交编辑。【参考方案3】:

两个透明像素混合的结果公式:

C1=[R1,G1,B1] 是前景像素颜色。

C2=[R2,G2,B2] 是背景像素颜色。

p1 是前景像素的不透明度百分比。

p2 是背景像素的不透明度百分比。

New_Pixel_Color = (p1*c1+p2*c2-p1*p2*c2)/(p1+p2-p1*p2)

New_Pixel_opacity = p1+p2-p1*p2

您可以测试并享受它!

【讨论】:

如果您想为您的网站做广告,您应该在您的个人资料中这样做。

以上是关于以数学方式计算不透明度值的主要内容,如果未能解决你的问题,请参考以下文章

以编程方式为 Typescript 中的颜色添加不透明度

PanGesture 和一些基础数学

什么是证书透明度(Certificate Transparency)?

什么是参考透明度?

如何创建一个从下到上包含 0 到 1 不透明度值(alpha 值)的 UIView?

UnityShader透明效果