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

Question

不透明度是如何用数学方法计算的？

Photoshop、CSS 等中都有不透明度值。实际上，这种不透明度是图层的透明行为。我们都知道。 但它是如何从数学上计算出来的呢？有没有计算不透明度的公式？

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

以纯色图层为例：第 1 层（前景层）和第 2 层（背景层）

第 1 层为红色（例如颜色值 A），第 2 层为白色（例如颜色值 ） B）。

当我们为第 1 层设置不透明度（例如 p）时，我们可以设置 0.5 或 50% 并获得白红色（例如颜色值 X）。

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

IE。

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

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

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

Answer 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）。

有关详细信息，请参阅有关透明度的维基百科文章。

Answer 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);


    

Answer 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

您可以测试并享受它！