基于alpha图片的重叠显示

基于alpha图片的重叠显示

原理

透明素材图片具有透明度是因为它除了有RGB三个颜色通道以外，还有一个alpha通道。包含alpha通道的图像一般存储为png格式。在图片叠加显示时利用透明通道，让底层的背景和上层前景的RGB三个通道进行混合。使叠加混合后的图片效果能够保持透明的效果。

Alpha通道

在图形学中，ALPHA指的是除了颜色的三个分量（RGB）外的第四个分量：透明度。所以，一个真彩色（指利用RGB分量合成颜色）的像素就变成由四个分量组成：R、G、B、A。假设R、G、B、A均为从0到1的值，其中ALPHA=0为完全透明，ALPHA=1为完全覆盖，中间的数值代表半透明。

实现步骤

若对两张图片进行叠加，则需对需要组合的颜色先计算出不含ALPHA分量的原始RGB分量，然后与Alpha相加。比如现在有两幅图，分别称为背景图background（不带透明度）和前景图foreground，将前景图叠加在背景图上：
把图片background分解为foreground.r矩阵，foreground.g矩阵，foreground.b矩阵，foreground.a矩阵。
把图片B作为背景图分解为background.r矩阵，background.g矩阵，background.b矩阵。
根据像素点叠加公式得到叠加结果：
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;

 alpha通道的值取值范围是0-255。0表示完全透明，255表示完全不透明。