Математический расчет значения непрозрачности

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

В Photoshop, CSS и т. д. есть значение непрозрачности. На самом деле эта непрозрачность является прозрачным поведением слоя. Это мы все знаем. Но как это вычислить математически? Есть ли какое-нибудь уравнение для расчета непрозрачности?

Установив значение непрозрачности, что там происходит?

Возьмем случай однотонных слоев: Слой 1 (слой переднего плана) и Слой 2 (фоновый слой).

Слой 1 — красный (скажем, значение цвета A), а слой 2 — белый (скажем, значение цвета B).

Когда мы устанавливаем непрозрачность (скажем, p) для слоя 1, мы можем установить 0,5 или 50% и получить беловато-красный цвет (скажем, значение цвета X).

Чтобы получить это значение X, что я должен сделать математически?

ie.

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

Я хочу знать точное математическое уравнение, чтобы найти X.

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


colors opacity equation mathematical-expressions
person spider    schedule 05.01.2012    source источник

Ответы (3)


arrow_upward
29
arrow_downward

Формула для объединения 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 ).

Дополнительную информацию см. в статье Википедии о прозрачности.

person ipavlic    schedule 05.01.2012

arrow_upward
6
arrow_downward

Следующий 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);

person Basil Musa    schedule 09.05.2012
comment
Спасибо! jsbin.com/OxEPEqo/2/edit -- мне нужно было противоположное, то есть второе набор входов. - person Langdon; 29.08.2013
comment
У метода caculateTransparentColor передний план и фон перевернуты. Это foreground * opacity, а не foreground * (1 - opacity). Отправлено редактирование. - person Brian Jordan; 05.05.2014

arrow_upward
3
arrow_downward

Формула результата смешивания двух прозрачных пикселей:

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

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

person Majid Parbaleh    schedule 01.02.2014
comment
Если вы хотите рекламировать свой сайт, вы должны сделать это в своем профиле. - person Don Cruickshank; 01.02.2014