精华内容
下载资源
问答
  • 本文介绍透明度叠加算法(Alpha Blending Algorithm),并用 C#/WPF 的代码,以及像素着色器的代码 HLSL 来实现它。 本文内容算法在 C# 代码中实现在像素着色器中实现 算法 对于算法,我只是搬运工,可以随意搜索到...

    本文介绍透明度叠加算法(Alpha Blending Algorithm),并用 C#/WPF 的代码,以及像素着色器的代码 HLSL 来实现它。


    算法

    对于算法,我只是搬运工,可以随意搜索到。算法详情请查看:Alpha compositing - Wikipedia

    对于完全不透明的背景和带有透明度的前景,合并算法为:

    float r = (foreground.r * alpha) + (background.r * (1.0 - alpha));
    

    这是红色。然后绿色 g 和蓝色 b 通道进行一样的计算。最终合成图像的透明通道始终设置为 1。

    在 C# 代码中实现

    多数 UI 框架对于颜色值的处理都是用一个 byte 赛表单个通道的一个像素。于是计算会采用 0xff 即 255。

    for (int i = 0; i + 4 < length; i = i + 4)
    {
        var backB = background[i];
        var backG = background[i + 1];
        var backR = background[i + 2];
        var foreB = foreground[i];
        var foreG = foreground[i + 1];
        var foreR = foreground[i + 2];
        double alpha = foreground[i + 3];
    
        blue = 0;
    
        output[i] = (foreB * alpha) + (backB * (1.0 - alpha));
        output[i + 1] = (foreG * alpha) + (backG * (1.0 - alpha));
        output[i + 2] = (foreR * alpha) + (backR * (1.0 - alpha));
        output[i + 3] = 1.0;
    }
    

    这段代码当然是跑不起来的,因为是下面两篇博客的魔改代码。你需要阅读以下两篇博客了解如何在 WPF 中按像素修改图像,然后应用上面的透明度叠加代码。

    话说,一般 UI 框架都自带有透明度叠加,为什么还要自己写一份呢?

    当然是因为某些场景下我们无法使用到 UI 框架的透明度叠加特性的时候。例如使用 HLSL 编写像素着色器的一个实现。

    下面使用像素着色器的实现是我曾经写过的一个特效的一个小部分,我把透明度叠加的部分单独摘取出来。

    在像素着色器中实现

    以下是 HLSL 代码的实现。Background 是从采样寄存器 0 取到的颜色采样,Foreground 是从采样寄存器 1 取到的颜色采样。

    这里的计算中,背景是不带透明度的,而前景是带有透明度的。

    /// <description>透明度叠加效果。</description>
    
    sampler2D Background : register(s0);
    sampler2D Foreground : register(s1);
    
    float4 main(float2 uv : TEXCOORD) : COlOR
    {
        float4 background = tex2D(Background, uv);
        float4 foreground = tex2D(Foreground, uv);
        float alpha = foreground.a;
    
        float r = (foreground.r * alpha) + (background.r * (1.0 - alpha));
        float g = (foreground.g * alpha) + (background.g * (1.0 - alpha));
        float b = (foreground.b * alpha) + (background.b * (1.0 - alpha));
        float a = 1.0;
        
        return float4(r, g, b, a);
    }
    

    叠加了一个带有透明度的图片

    如果要测试的图片都是不带透明度的,那么可以通过自己设一个透明度来模拟,传入透明度值 Alpha。

    /// <description>透明度叠加效果。</description>
    
    /// <type>Double</type>
    /// <summary>采样 2 的叠加透明度。</summary>
    /// <minValue>0.0</minValue>
    /// <maxValue>1.0</maxValue>
    /// <defaultValue>0.75</defaultValue>
    float Alpha : register(C0);
    
    sampler2D Background : register(s0);
    sampler2D Foreground : register(s1);
    
    float4 main(float2 uv : TEXCOORD) : COlOR
    {
        float4 background = tex2D(Background, uv);
        float4 foreground = tex2D(Foreground, uv);
        float alpha = Alpha;
    
        float r = (foreground.r * alpha) + (background.r * (1.0 - alpha));
        float g = (foreground.g * alpha) + (background.g * (1.0 - alpha));
        float b = (foreground.b * alpha) + (background.b * (1.0 - alpha));
        float a = 1.0;
        
        return float4(r, g, b, a);
    }
    

    为第二张采样设定透明度


    参考资料


    我的博客会首发于 https://blog.walterlv.com/,而 CSDN 会从其中精选发布,但是一旦发布了就很少更新。

    如果在博客看到有任何不懂的内容,欢迎交流。我搭建了 dotnet 职业技术学院 欢迎大家加入。

    知识共享许可协议

    本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名吕毅(包含链接:https://walterlv.blog.csdn.net/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

    展开全文
  • 动态计算高度 height: calc(100vh - 60px); 透明颜色: 透明色:transparent 背景色设为透明,代码如下:background-color:transparent; 字体颜色设为透明,代码如下:color:transparent;...半透明 opacity: 0.5;
    
    动态计算高度
    height: calc(100vh - 60px);
    
    透明颜色:
    透明色:transparent
    背景色设为透明,代码如下:background-color:transparent;
    字体颜色设为透明,代码如下:color:transparent;
    
    半透明
    opacity: 0.5;
    
    展开全文
  • 透明度计算

    千次阅读 2017-07-19 13:48:36
    换算 在开发过程中,UI/UE给...将透明度转换成不透明度(转换方式参考“透明度”,第2条) 。 不透明度为60%不透明度乘以255。 我们得到结果:153将计算结果转换成16进制。得到最终的不透明度:99将不透明度和颜色值拼

    换算

    在开发过程中,UI/UE给的标注图上,所有颜色值是RGB,但是透明度经常都是百分比,例如:颜色值:#FFFFFF,透明度40%。
    使用过程中我们需要进行换算。以之前的值为例,换算过程如下:

    1. 将透明度转换成不透明度(转换方式参考“透明度”,第2条) 。 不透明度为60%
    2. 不透明度乘以255。 我们得到结果:153
    3. 将计算结果转换成16进制。得到最终的不透明度:99
    4. 将不透明度和颜色值拼接成ARGB格式。得到最终的颜色值: #99FFFFFF

    简单的换算,可以先将透明度,转换成不透明度,再根据下面的表格进行对应。

    
    

    [plain] view plain copy
     print?
    1. 100% — FF  
    2. 95% — F2  
    3. 90% — E6  
    4. 85% — D9  
    5. 80% — CC  
    6. 75% — BF  
    7. 70% — B3  
    8. 65% — A6  
    9. 60% — 99  
    10. 55% — 8C  
    11. 50% — 80  
    12. 45% — 73  
    13. 40% — 66  
    14. 35% — 59  
    15. 30% — 4D  
    16. 25% — 40  
    17. 20% — 33  
    18. 15% — 26  
    19. 10% — 1A  
    20. 5% — 0D  
    21. 0% — 00  
    展开全文
  • 计算透明度

    2014-10-10 20:33:00
    计算透明度比如计算黑色不透明度……10%为:255*10%=25.5 四舍五入就是26 这就是十进制的,转换为十六进制就是1a.. 转载于:https://www.cnblogs.com/shansheng/p/4017738.html...


     计算不透明度比如计算黑色不透明度……10%

     为:255*10%=25.5 四舍五入就是26

           这就是十进制的,转换为十六进制就是1a.. 

    转载于:https://www.cnblogs.com/shansheng/p/4017738.html

    展开全文
  • 颜色透明度计算

    千次阅读 2019-09-02 15:28:24
    怎么计算这个30%的透明度? 颜色值通常遵循RGB/ARGB标准,使用时通常以#字符开头,以16进制表示 其中RGB依次代表红色(Red)、绿色(Green)、蓝色(Blue) ARGB依次代表透明度(Alpha)、红色(Red)、绿色(Green)...
  • Android透明度计算

    2016-12-28 11:26:57
    Android颜色透明度计算方式: 1.Android颜色是16进制带有透明度格式:ARGB 其中 A是透明度 00是全透明 FF是不透明。  2.计算:比如颜色333333 40%透明度 即60%不透明度。 60%*255 后在转换成16进制 是99 所以...
  • android 透明度计算

    千次阅读 2015-11-07 00:43:13
    开发中经常会碰到透明度百分比的问题。 透明度分为256阶(0-255),计算机上用16进制表示为(00-ff)。 透明就是0阶,不透明就是255阶,如果50%透明就是127。...故计算公式为 255×透明度百分比 即可。
  • Color透明度计算方法

    千次阅读 2014-03-20 14:51:57
    透明度的取值范围是0~255(以16进制表示就是00~ff)。值越小,组件越透明。在xml设置背景的时候,其实是8位数值的,后六位表示的是RGB的数值,前两位表示的是透明度,当然我们一般都没写透明度,默认就不透明的了。 ...
  • 在很多数据开发语言里面,多有设置透明度 , 比如 :...在我学习过程中老师教会我一个计算公式比如:我要背景透明度设置显示百分之七十转十六进制(255*0.7)=b2 设置背景颜色就是 backg...="#b2ffffff"...
  • 有时候我们需要在xml中设置view的对应的颜色的透明度(#XXRRGGBB),可以这么计算:  100%透明对应10进制为255(16进制为FF), 则A%: A%*255,计算出来的数值,小数点后面的数四舍五入,最终的结果再转为16进制...
  • 16进制透明度计算

    2017-02-20 10:26:06
    Hex(十六进制值)、Decimal(十进制值)、Octal(八进制值)、Binary(二...那么在进位制选择十进制,输入63,在Hex输出框可以得到3f,那么这个就是十进制时63转化为十六进制的值计算公式(例子):透明度25%(255×2
  • Android颜色透明度(不透明度计算

    千次阅读 2018-07-04 10:07:13
    我们在开发过程中经常看到美工给你的标注颜色类似于#0000FF(蓝色)这样的颜色码,然后还可能有一个不透明度(美工可能给你说的是透明度,但是这个准确来说是不透明度,下面有图为证)那这个不透明度,在Andriod中怎么...
  • 16进制颜色透明度计算方法

    千次阅读 2017-02-28 10:16:27
    在安卓软件开发时老是会遇到取一定透明度的颜色,这个其实可以计算的。 安卓系统里颜色一般用6位16进制表示,如#ffffff,全为f,说明是各种颜色的组合,是白色。#000000是什么颜色都没有,那就是黑色。 加上透明度...
  • 本文整理了一些rgba 和IE下filter数值的转换直接取整计算的,没有进位直接舍去,详细如下,感兴趣的朋友可以参考下哈
  • 两个半透明颜色色的叠加计算方法

    千次阅读 2017-12-15 17:50:19
    讲 Alpha 混合的文章太多了,我并非要说有...也就是说,原始色也是有透明度的。 为此我首先用 PS 做了不少试验,试图推导出 Alpha 混合的公式。其实,一些简单的实验外加一些逻辑推理,成功了找到了 Alpha 混合的方法
  • 透明度计算方法及参照表

    千次阅读 2017-04-06 16:13:40
    for (double i = 1; i >= 0; i -= 0.01) {  i = Math.round(i * 100) / 100.0d; ... int alpha = (int) Math.round(i * 255);... String hex = Integer.toHexString(alpha).toUpperCase();... if
  • 透明度

    2021-03-03 17:34:17
    背景 开发的都知道,UI微调都是令人头痛的,尤其是颜色的微调。 如果视觉稿直接给颜色值那倒没啥,可怕的是后面还有标了透明度,而且视觉还原后发现颜色太透明了,要...1. 透明度计算 透明度分为256个等级,即.
  • 1、#ff000000 此为16进制颜色代码,前2位ff为透明度,后6位为颜色值(000000为黑色,ffffff为白色,可以用ps等软件获取)。 2、透明度分为256阶(0-255),计算机上用16进制表示为(00-ff)。  透明就是0阶,...
  • 255 * 透明度百分比 = 值 ---> 转成16进制
  • android色值透明度计算

    2016-04-25 15:30:00
    255 * 透明度百分比 = 值 --> 转成16进制 // 十进制转化为十六进制,结果为C8 Integer.toHexString(200);
  • android 色值透明度计算

    千次阅读 2015-02-28 19:33:51
    255 * 透明度百分比 = 值 ---> 转成16进制
  • NavigationBar的默认透明度为85% 颜色叠加计算公式: RGB需要分开计算,以叠加白色背景为例: 原始颜色(217,10,20) 设置透明度85% 计算过程: R=217 + (255-217)*(1-0.85) G=10 + (255-10)*(1-0.85) B=20 + ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 144,978
精华内容 57,991
关键字:

计算透明度