数学计算不透明度值
数学计算不透明度值
提问于 2012-01-05 21:39:44
不透明度是如何在数学上计算的？
在Photoshop，CSS等中都有不透明度的值。实际上，这种不透明度是图层的透明行为。我们都知道。但是它是如何在数学上计算出来的呢？有没有计算不透明度的公式？
通过设置不透明度值，那里发生了什么？
以纯色层为例:层1(前景层)和层2(背景层)
第一层是红色(例如颜色值A)，第二层是白色(例如颜色值B)。
当我们设置不透明度(比方说p)为第一层时，我们可以设置0.5 %或50%，并得到一个白红色(比方说颜色值X)。
为了得到这个值X，我应该怎么做呢？
即。
X = (things which will be a relation containing p, A and B)我想知道找到X的精确数学方程式。
另外，如果我有等式，并且颜色值本质上是十六进制的，那么使用十六进制计算器可以得到正确的结果吗？
回答 2
Stack Overflow用户
发布于 2012-05-09 20:17:49
下面的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);
Stack Overflow用户
发布于 2014-02-01 08:26:10
混合两个透明像素的结果公式：
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
你可以测试并享受它！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8743482
复制相关文章
相似问题