Obliczanie wartości nieprzezroczystości matematycznie

Question

W jaki sposób nieprzezroczystość obliczana jest matematycznie?

Istnieje wartość nieprzezroczystości w Photoshopie, CSS itp. Faktycznie to krycie jest przezroczystym zachowaniem warstwy. Wszyscy to wiemy. Ale w jaki sposób jest obliczany matematycznie? Czy istnieje jakieś równanie do obliczania nieprzezroczystości?

Ustawiając wartość krycia, co się tam dzieje?

Weźmy przykład zwykły kolor warstwy: warstwę 1 (wiedzy Layer) i warstwy 2 (warstwa tła)

warstwy 1 jest czerwona (powiedzmy wartość koloru A) i warstwa 2 jest biała (powiedzmy wartość koloru B) .

Gdy ustawimy krycie (na przykład p) na warstwę 1, możemy umieścić 0,5 lub 50% i uzyskać białawy kolor czerwony (powiedzmy wartość koloru X).

Aby uzyskać tę wartość, X co mam zrobić matematycznie?

tj.

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

Chcę poznać dokładne równanie matematyczne, aby znaleźć X.

Również jeśli mam równanie, a wartości kolorów mają charakter szesnastkowy, więc za pomocą kalkulatora heksadecymalnego mogę uzyskać poprawny wynik?

Answer 1

Wzór łączenia C1 = (R1,G1,B1) i C2 = (R2,G2,B2) na nowy kolor C3, gdzie C2 są nakładane na górze C1 z przezroczystością p zwykle ((1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2).

Aby uzyskać więcej informacji, patrz Wikipedia article on transparency.

Answer 2

Poniżej JavaScript podaje sposób, który może być używany do ręcznego wyliczania wartości barw nieprzezroczystość:

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

Kod:

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

Wzór na wymieszanie dwóch przezroczystych pikseli:

C1 = [R1, G1, B1] jest kolorem pierwszego planu piksela.

C2 = [R2, G2, B2] to kolor tła w pikselach.

p1 to procent przezroczystości piksela pierwszego planu.

p2 to procent krycia piksela w tle.

New_Pixel_Color = (p1 * C1 + p2 * c2-p1 * p2 c2 *)/(p1 + p2-p1 * p2)

New_Pixel_opacity = p1 + p2-p1 * p2

Można sprawdź i ciesz się!