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

Question

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

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

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

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

Layer 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.

Также, если у меня есть уравнение, а значения цвета шестнадцатеричные по своей природе, поэтому с шестнадцатеричным калькулятором я могу получить правильный результат?

Answer 1

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

Для получения дополнительной информации см. Wikipedia article on transparency.

Answer 2

Следующая Javascript дает метод, который может быть использован для вычисления значения непрозрачности цвета вручную:

// caculateTransparentColor(foreground, background, opacity) 
var theColor = caculateTransparentColor('#ff0000', '#00ff00', 0.5) 
console.log(theColor); 
Returns: #808000 

Код:

var COLOR_REGEX = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/; 
function colorHexToRGB(htmlColor) { 

    arrRGB = htmlColor.match(COLOR_REGEX); 
    if (arrRGB == null) { 
     alert("Invalid color passed, the color should be in the html format. Example: #ff0033"); 
    } 
    var red = parseInt(arrRGB[1], 16); 
    var green = parseInt(arrRGB[2], 16); 
    var blue = parseInt(arrRGB[3], 16); 
    return {"r":red, "g":green, "b":blue}; 
} 

function caculateTransparentColor(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 
    var foregroundRGB = colorHexToRGB(foregroundColor); 
    var backgroundRGB = colorHexToRGB(backgroundColor); 
    var finalRed = Math.round(backgroundRGB.r * (1-opacity) + foregroundRGB.r * opacity); 
    var finalGreen = Math.round(backgroundRGB.g * (1-opacity) + foregroundRGB.g * opacity); 
    var finalBlue = Math.round(backgroundRGB.b * (1-opacity) + foregroundRGB.b * opacity); 
    return colorRGBToHex(finalRed, finalGreen, finalBlue); 
} 

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."); 
    } 
    var formatHex = function(value) { 
     value = value + ""; 
     if (value.length == 1) { 
      return "0" + value; 
     } 
     return value; 
    } 
    hexRed = formatHex(red.toString(16)); 
    hexGreen = formatHex(green.toString(16)); 
    hexBlue = formatHex(blue.toString(16)); 

    return "#" + hexRed + hexGreen + hexBlue; 
} 

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

Вы можете испытайте и наслаждайтесь!