18

不透明度は数学的にどのように計算されますか?

Photoshop や CSS などには不透明度の値があります。実際には、この不透明度はレイヤーの透明な動作です。私たち全員が知っていること。しかし、それは数学的にどのように計算されるのでしょうか? 不透明度を計算する式はありますか?

不透明度の値を設定すると、何が起こっているのでしょうか?

無地レイヤーの場合：レイヤー1（前景レイヤー）とレイヤー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。

また、方程式があり、色の値が本質的に16進数である場合、16進数の計算機で正しい結果を得ることができますか?

4

3 に答える 3

30

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 )ます。

詳細については、透明性に関するウィキペディアの記事を参照してください。

于 2012-01-05T13:52:12.780 に答える
6

次の 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);

于 2012-05-09T12:17:49.150 に答える
3

2 つの透明ピクセルを混合した結果の式:

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

試して楽しむことができます！

于 2014-02-01T00:26:10.403 に答える