以数学方式计算不透明度值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (131)

不透明度如何以数学方式计算?

在Photoshop,CSS等中有不透明度值。实际上,这种不透明度是图层的透明行为。我们都知道。但它是如何以数学方式计算的?有没有计算不透明度的等式?

通过设置不透明度值,那里发生了什么?

以普通颜色层为例:第1层(前景层)和第2层(背景层)

第1层是红色(比如颜色值A),第2层是白色(比如颜色值B)。

当我们将不透明度(比方说p)设置为第1层时,我们可以放0.5或50%并获得白红色(比如颜色值X)。

为了获得这个价值,X我应该用数学方法做什么?

即。

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

我想知道要找到的确切数学方程式X

另外,如果我有方程式,颜色值本质上是十六进制的,那么使用十六进制计算器可以得到正确的结果吗?

提问于
用户回答回答于

以下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);


    

热门问答

能提供腾讯区块链TBaas技术上链对接的流程图吗?

您好,非常感谢您的建议,我们目前确实没有整理完整的流程图,我们会尽快补齐并上线。 文字版的流程您可以先参考一下: 1,梳理业务场景和流程 2,规划区块链网络规模 3,购买区块链节点、组建区块链网络 4,根据业务场景编写智能合约 5,应用系统调用区块链的智能合约,与链交互 如果...... 展开详请

关于云直播的几个问题,望大佬解惑?

学生路人
推荐

1 海外单独计费

2 地址都是自己算的 可以变也可以不变

3 这个接口是拉流转推的 ,和播放不是一个东西哈 。

腾讯加固助手不能下载了吗?下载地址在哪里?MAC可以下载吗?我看只能在网页上加固,自己签名。?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐

乐固客户端已下线,可以使用移动应用在线加固https://console.cloud.tencent.com/ms/reinforce/list

可以自行签名打渠道包。

一台服务器能绑定几个域名,我现在需要另外购买一台服务器目前已经有一台服务器并且绑定一个备案过的域名?

推荐
如果问“能绑定多少域名”,那可以绑定无限个。 如果问“能备案多少域名”,那也可以绑定无限个。 如果问“能绑定多少个备案主体名下的域名”,就需要科普了。 (1)一个腾讯云账号只能有一个主体的备案信息(主体即为个人或者单位)。所以有个东西叫做“备案授权码”,每个账号A申请授权码并发送...... 展开详请

我用spark多个特征处理算子对原始数据进行处理,最后通过决策树训练分类,请问怎么导出最终模型?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐

您好,如果是使用组件自己编写的代码,可以使用 spark 中的 pipeline 功能,将多个功能串成一个流水线,再把流水线导出为 pmml 模型。详见 https://github.com/jpmml/jpmml-sparkml。

TencentOS例程,keil5编译报错no such file or directory?

Supowang

腾讯 · 高级工程师 (已认证)

腾讯物联网操作系统TencentOS tiny产品接口人---岁寒知松柏,做最好的自己!
推荐
您好!您的代码是早期的代码,请使用最新的github代码,代码下载地址:https://github.com/Tencent/TencentOS-tiny 或者腾讯工蜂 https://git.code.tencent.com/Tencent_Open_Source/Tence...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券