Calcolo matematico del valore di opacità

Question

Come viene calcolato matematicamente l'opacità?

C'è un valore di opacità in Photoshop, CSS ecc. In realtà questa opacità è il comportamento trasparente di un livello. Questo lo sappiamo tutti. Ma come viene calcolato matematicamente? Esiste qualche equazione per calcolare l'opacità?

Impostando il valore di opacità cosa sta succedendo lì?

Prendiamo il caso di strati normali di colore: Livello 1 (livello di primo piano) e Layer 2 (livello di sfondo)

livello 1 è rosso (detto valore di colore A) e Layer 2 è bianco (detto valore di colore B) .

Quando impostiamo l'opacità (ad esempio p) sul livello 1, possiamo inserire 0,5 o 50% e ottenere un colore rosso biancastro (ad esempio il valore di colore X).

Per ottenere questo valore X cosa dovrei fare matematicamente?

ie.

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

voglio sapere l'esatto equazione matematica per trovare X.

Anche se ho l'equazione, e i valori di colore sono esadecimali in natura, quindi con un calcolatore esadecimale posso ottenere un risultato corretto?

Answer 1

La formula per combinare C1 = (R1,G1,B1) e C2 = (R2,G2,B2) in un nuovo colore C3, dove C2 è sovrapposto alla C1 con opacità p è solitamente ((1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2).

Vedere Wikipedia article on transparency per ulteriori informazioni.

Answer 2

Il seguente JavaScript dà un metodo che può essere utilizzato per calcolare il valore del colore di opacità manualmente:

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

Codice:

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

Formula per miscelazione di due pixel trasparenti:

C1 = [R1, G1, B1] è il colore del pixel in primo piano.

C2 = [R2, G2, B2] è il colore del pixel di sfondo.

p1 è la percentuale di opacità del pixel in primo piano.

p2 è la percentuale di opacità del pixel di sfondo.

New_Pixel_Color = (p1 * c1 + p2 * c2-p1 * p2 * c2)/(P1 + P2-P1 * P2)

New_Pixel_opacity = P1 + P2-p1 * p2

Puoi prova e divertiti!