Obliczanie wartości krycia matematycznie
Jak obliczyć krycie matematycznie?
Istnieje wartość krycia w Photoshopie, CSS itp. W rzeczywistości krycie to przezroczyste zachowanie warstwy. Wszyscy to wiemy. Ale jak to jest obliczane matematycznie? Czy jest jakieś równanie do obliczenia nieprzezroczystości?
Ustawiając wartość krycia co się tam dzieje?
Weźmy przypadek zwykłych warstw kolorów: Warstwa 1 (warstwa pierwszoplanowa) i Warstwa 2 (warstwa tła)
Warstwa 1 jest czerwona (powiedzmy wartość koloru A) i Warstwa 2 jest biała (powiedzmy wartość koloru B).
Kiedy ustawimy krycie (powiedzmy p) na warstwę 1, możemy umieścić 0,5 lub 50% i uzyskać biało-czerwony kolor(powiedzmy wartość koloru X).
Aby uzyskać tę wartość X co powinienem zrobić matematycznie?
Ie.
X = (things which will be a relation containing p, A and B)
Chcę znać dokładne równanie matematyczne, aby znaleźć X.
Również jeśli mam równanie, a wartości kolorów są szesnastkowe w naturze, więc z kalkulatorem hex mogę uzyskać poprawny wynik?
3 answers
Wzór na połączenie C1 = (R1,G1,B1) i C2 = (R2,G2,B2) w Nowy Kolor C3, Gdzie C2 jest nakładany na C1 z nieprzezroczystością P jest zwykle ( (1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2 ).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-24 10:23:59
Poniższy javascript podaje metodę, która może być użyta do ręcznego obliczania wartości koloru krycia:
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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-05 20:46:17
Wzór na wynik mieszania dwóch przezroczystych pikseli:
C1 = [R1,G1,B1] jest kolorem piksela pierwszoplanowego.
C2 = [R2,G2,B2] to kolor piksela tła.
P1 to procent krycia piksela pierwszego planu.
P2 to procent krycia piksela tła.
New_Pixel_Color = (p1*c1+p2*c2-P1*p2*c2)/(P1+P2-P1*p2)
New_Pixel_opacity = p1+p2-p1*p2
Możesz przetestować i cieszyć się!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-27 12:57:12