文档章节

正确理解RGBA的含义

ueharaai
 ueharaai
发布于 2013/08/10 21:20
字数 444
阅读 184
收藏 0

看到这个标题有人可能要喷了,这不简单,就是红绿蓝再加上透明度呗。

其实这里面有你可能会完全忽略的东西。

比如,如果屏幕上两个点的颜色分别是(1,1,1,0.8),(1,1,1,0.5),这两个点有什么不一样?

答案是两个点是完全一样的。

一般情况下,电脑的标准屏幕设备是不存在A这个分量的,A的存在只是用于我们计算。正因为A不是电脑设备的标准输出量,所以在不同的环境中RGBA表现的值并不一定是相同的。这点差异会导致最终的屏幕输出不一致的情况发生。

对于ALPHA的使用,大部分人应该都知道这个公式。

ALPHA混合后的值=(srcColor)*srcAlpha+(dstColor)*(1-srcAlpha)

注意到,对位图上的一个点来说,只要该点的颜色值不改变,srcColor*srcAlpha对那个点来说就是个常量。所以一些系统为了优化会预先把这个值乘上,结果是RGBA变成了(RA,GA,BA,A)。如果一个资源只在一个系统里显示操作,倒也没问题,但如果是系统间的切换,问题就来了。

如果你看到一个RBGA是(0.3,0.3,0.3,0.3)时,那么它究竟表示的是(0.09,0.09,0.09,0.3)还是(1,1,1,0.3)?这就得根据实际情况来了。如果RGBA是预乘的值,用alpha混合公式就会得出错误的结果,因为srcAlpha被乘了两道,图片看上去会比它本来的样子更黑一些(如果alpha只有0和1没有这个问题)。这时正确的公式应该是

(srcColor)+(dstColor)*(1-srcAlpha)



© 著作权归作者所有

共有 人打赏支持
ueharaai
粉丝 42
博文 22
码字总数 18134
作品 0
徐汇
技术主管
加载中

评论(1)

中山野鬼
中山野鬼
这应该是处理图层的模块做的吧。和图片数据生成的模块没关系。包括尺寸拉伸。
13、canvas操纵像素数据ImageData

一、ImageData 对象 含义: 存储canvas对象真实的像素数据(每个像素块的RGBA色值) 属性: 1、width:图片宽度,单位是像素 2、height:图片高度,单位是像素 3、data:图片中,所有像素的R...

飞向月球8
07/12
0
0
spark2.x由浅入深深到底系列七之py4j在spark中python api的使用

学习spark的任何技术前请先正确理解spark,可以参考: 正确理解Spark 我们知道spark的RDD支持scala api、java api以及python api,我们分别对scala api与java api做了详细的介绍,本文我们将...

tangweiqun
2017/09/23
0
0
AGG第五课 RGB颜色定义

混合器的存在是为了适应不同平台、不同需求下的不同像素格式。混合器有三种:agg::rgba,agg::rgba8和agg::rgba16,都是用来指定颜色的,rgba每个通道储存为double,rgba8为unsigned char,r...

技术小胖子
2017/11/07
0
0
RGB和RGBA之间的转换

function RGB2RGBA(rgbcolor,alp){ //注:rgbcolor的格式为#FFFFFFF var r = parseInt("0x" + rgbcolor.substr(1,2)); var g = parseInt("0x" + rgbcolor.substr(3,2)); var b = parseInt("......

lovethe51cto
2016/03/28
0
0
CSS3和jQuery实现的自定义美化Checkbox...

是不是比默认的好看多了,个人的审美观应该还是可以的。 当然我们可以在这里查看DEMO演示。 接下来我们一起来看看实现这款美化版Checkbox的源代码。主要思路是利用隐藏原来的checkbox和radio...

我输过但从未怕过
2016/05/11
52
0

没有更多内容

加载失败,请刷新页面

加载更多

Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
36分钟前
1
0
我为什么用GO语言来做区块链?

Go语言现在常常被用来做去中心化系统(decentralised system)。其他类型的公司也都把Go用在产品的核心模块中,并且它在网站开发中也占据了一席之地。 我们在决定做Karachain的时候,考量(b...

HiBlock
41分钟前
1
0
大数据学习脑图以及入门教程!

近些年,大数据的火热可谓是技术人都知道啊,很多人呢,也想学习大数据相关,所以,这里分享几个大数据脑图,希望可以让你清楚明白从哪里入门大数据,知道该学习以及掌握哪些知识点; 大数据...

董黎明
今天
1
0
聊聊redis的监控工具

序 本文主要研究一下redis的监控工具 redis-stat redis-stat是一个比较有名的redis指标可视化的监控工具,采用ruby开发,基于redis的info命令来统计,不影响redis性能。 docker运行 docker r...

go4it
今天
2
0
TypeScript基础入门之高级类型的索引类型(Index types)

转发 TypeScript基础入门之高级类型的索引类型(Index types) 高级类型 索引类型(Index types) 使用索引类型,编译器就能够检查使用了动态属性名的代码。 例如,一个常见的JavaScript模式是从...

durban
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部