Вычисление значения непрозрачности математически

Question

Как непрозрачность рассчитывается математически?

В 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,

Кроме того, если у меня есть уравнение, а значения цвета имеют шестнадцатеричный характер, так что с помощью шестнадцатеричного калькулятора я могу получить правильный результат?

Answer 1

Формула для объединения С1 = (R1,G1,B1) и С2 = (R2,G2,B2) в новый цвет C3, где C2 накладывается поверх C1 с непрозрачностью p обычно ( (1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2 ),

См. Статью Wikipedia о прозрачности для получения дополнительной информации.

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

Вы можете проверить и наслаждаться этим!