blocks|key|689277|text|下面的javascript提供了一种可用于手动计算不透明度颜色值的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|689278|​|689279|++++function+calculateTransparentColor(foregroundColor,+backgroundColor,+opacity)+{
++++++++if+(opacity+<+0.0+%7C%7C+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)+%2B+foregroundRGB.r+*+opacity);
++++++++let+finalGreen+=+Math.round(backgroundRGB.g+*+(1-opacity)+%2B+foregroundRGB.g+*+opacity);
++++++++let+finalBlue+=+Math.round(backgroundRGB.b+*+(1-opacity)+%2B+foregroundRGB.b+*+opacity);
++++++++return+colorRGBToHex(finalRed,+finalGreen,+finalBlue);
++++}

++++var+COLOR_REGEX+=+/%5E#([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+%7C%7C+red+>+255+%7C%7C+green+<+0+%7C%7C+green+>+255+%7C%7C+blue+<+0+%7C%7C+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+"#"+%2B+hexRed+%2B+hexGreen+%2B+hexBlue;
++++}

++++function+formatHex(value)+{
++++++++value+=+value+%2B+"";
++++++++if+(value.length+==+1)+{
++++++++++++return+"0"+%2B+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%25+opacity+produces:+"+%2B+theColor);|code-block|syntax|javascript|689280|689281|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

The following javascript gives a method that can be used to calculate the opacity color value manually:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> function calculateTransparentColor(foregroundColor, backgroundColor, opacity) {
 if (opacity &lt; 0.0 || opacity &gt; 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 &lt; 0 || red &gt; 255 || green &lt; 0 || green &gt; 255 || blue &lt; 0 || blue &gt; 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);


 </code></pre>
</div>
</div>

blocks|key|689331|text|混合两个透明像素的结果公式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|689332|C1=R1，G1，B1是前景像素颜色。|689333|C2=R2、G2、B2是背景像素颜色。|689334|p1是前景像素的不透明度百分比。|689335|p2是背景像素的不透明度百分比。|689336|New_Pixel_Color+=+(p1*c1%2Bp2*c2-p1*p2*c2)/(p1%2Bp2-p1*p2)|689337|New_Pixel_opacity+=+p1%2Bp2-p1*p2|689338|你可以测试并享受它！|689339|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|W|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

Formula for Result of mixing two transparent pixels:

C1=[R1,G1,B1] is the foreground pixel color.

C2=[R2,G2,B2] is the background pixel color.

p1 is the opacity percentage of the foreground pixel.

p2 is the opacity percentage of the background pixel.

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

New_Pixel_opacity = p1+p2-p1*p2

You can test and enjoy it!

How is opacity calculated mathematically?

There is opacity value in Photoshop, CSS etc. Actually this opacity is the transparent behavior of a layer. That we all know.
But how is it calculated mathematically? Is there any equation to calculate opacity?

By setting opacity value what is happening there?

Take the case of plain color layers: Layer 1 (Foreground Layer) and Layer 2 (background layer)

Layer 1 is red (say color value <code>A</code>) and Layer 2 is white (say color value <code>B</code>). 

When we set opacity (say <code>p</code>) to layer 1, we can put 0.5 or 50% and get a whitish red color (say color value <code>X</code>).

For getting this value <code>X</code> what should I do mathematically?

ie.

<pre><code>X = (things which will be a relation containing p, A and B)
</code></pre>

I want to know the exact mathematical equation to find <code>X</code>.

Also if I have the equation, and color values are hexadecimal in nature, so with a hex calculator can I get a correct result?

Calculating opacity value mathematically

不透明度是如何在数学上计算的？在Photoshop，CSS等中都有不透明度的值。实际上，这种不透明度是图层的透明行为。我们都知道。但是它是如何在数学上计算出来的呢？有没有计算不透明度的公式？通过设置不透明度值，那里发生了什么？以纯色层为例:层1(前景层)和层2(背景层)第一层是红色(例如颜色值A)，第二层是白色(例如颜...

问数学计算不透明度值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问数学计算不透明度值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问数学计算不透明度值
EN