首页 > Android, iOS > 图片的alpha算法

图片的alpha算法

2011年1月13日 发表评论 阅读评论

不少程序中,都使用半透明的效果。虽然现有的api或者控件都提供这个功能,但某些情况下,还需要了解一下alpha算法。

假设2张图片为A和B,合成图片为C,以RGBA都是8bit为例。在PNG-24下,alpha 255表示不透明,0表示全透明。

C的每个像素RGB值是分别计算的。那么对于A和B的每一个像素,目标像素RGB值为

Rc = (Ra*alpha + Rb*(255-alpha))/255

Gc = (Ga*alpha + Gb*(255-alpha))/255

Bc = (Ba*alpha + Bb*(255-alpha))/255

在我的上一个iPhone应用里,要模拟iPhone界面。在iPhone锁定屏幕里,最后面是用户设置的背景,前面有若干alpha值不同的控件。如果要使用控件做到完整的模拟,因为不知道alpha值,要不断调整测试(并且不同位置的alpha值不同)。我想到一个办法就是用一张全屏图片来做出所有控件背景效果,然后在上面用背景透明的UILabel显示文字。

如何得到这张需要的图片呢?看上面的公式,如果我用全白RGB(255,255,255)和全黑RGB(0,0,0)做背景图片,就可以推导出alpha的值了。

alpha = 255 + R(black) – R(white)

下面的事情很简单了,做一个全白色图片和全黑色图片,分别设置成背景,然后截屏。

IMG_0578 IMG_0579

写个程序,用上面方法计算叠加图片的RGBA:

overlay

最后,用图片编辑工具将不需要的文字和滑块修改掉,就得到最终图片。在IB里,放两个重叠在一起的UIImage,后面的放正常背景图片,前面使用刚刚生成的图片,背景透明,最前面是UILabel的文字和UISlider滑块,就得到可以和iPhone以假乱真的界面。(下面的图片没有调整文字)

overlayoverlay1

分类: Android, iOS 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.