像素叠加实现图片的半透明混合

半透明的混合效果经常在游戏里看到,效果那叫一个好。有天好奇心起,想琢磨一下这种效果是怎么实现的。可是自己没学过数字图像处理和图形学,于是只好凭直觉猜测了。

按照生活经验,将两个胶片叠在一起时会有半透明效果,于是设想:从位图A和B中对应位置各取一点Pa、Pb,分别求取Pa和Pb的RGB三个分量,并将对应分量求均值后拼装成一个新的颜色,这样就是透明度为一半的混合效果了。按这个思路试了试,发现运气真好。

实现RGB拼装的函数很简单,此处仅说明原理,未作优化:

/**//*
 * alpha mix demo
*/
inline COLORREF AlphaPixel(UINT alpha, COLORREF clr1, COLORREF clr2)
{
    double k = (double)alpha / 256.0;
    double reverse_k = 1.0 - k;

    BYTE r = BYTE( GetRValue(clr2) * k + GetRValue(clr1) * reverse_k );
    BYTE g = BYTE( GetGValue(clr2) * k + GetGValue(clr1) * reverse_k );
    BYTE b = BYTE( GetBValue(clr2) * k + GetBValue(clr1) * reverse_k );

    return RGB(r, g, b);
}

细心的读者从上面代码可以发现,随着alpha参数由0-255的变化,混合效果可以实现全透明--不透明的渐变。依据上述函数实现的半透明混合效果截图:


程序源代码(内含demo)下载:http://blog.vckbase.com/Files/HateMath/test_alpha.rar

程序在winXp SP2 + VC6.0下通过。

时间: 2024-10-04 17:16:27

像素叠加实现图片的半透明混合的相关文章

100*100像素的bmp图片缩小为20*30大小的bmp图片是怎样的原理 ?

问题描述 100*100像素的bmp图片缩小为20*30大小的bmp图片是怎样的原理 ? 百度的答案好像说是涉及傅里叶算法,没有搞明白,求大神说明原理,是相邻的几个像素平均成一个像素? 解决方案 这类算法很多,基本原理是"映射".就是说这个算法定义了如何把一个像素点映射到目标像素点.比如一个10x10的图片,你想把它拉成20x20的图片,你可以设计一个最简单的算法,把(x,y)[x,y从1开始]映射到(2x-1,2y-1)(2x-1,2y)(2x,2y-1)(2x,2y)这四个点. 解

在VC6.0中用GDI+调用png图片实现半透明渐变的特效窗口

一.概述 GDI+的应用使得平面图形图象编程变的更加容易,本文以一个基于对话框的时钟程序为例,在VC6.0中调用*.png图片实现半透明渐变窗口,该程序实现了指针式和数字式两种时钟显示方式.窗口实现了半透明渐变窗口.窗口拖动无移动矩形框.隐藏了任务栏窗体按钮等. 效果图如下: 图一 程序执行后与WindowXP桌面背景效果图 二.准备工作 1.图片资源准备工作.首先在Photoshop中编辑好时钟的背景.时针.分针以及数字时钟显示方式的所有图片,如下图:将这些图片保存成为带透明通道的.png格式

使用jQuery实现图片遮罩半透明坠落遮挡

 这篇文章主要介绍了使用jQuery实现图片遮罩半透明坠落遮挡,效果非常棒,小伙伴们做相册的时候可以直接拿走使用.     默认九宫格图片排列效果,当鼠标悬停在图片上后,会从图片的上方下滑一个半透明遮罩的效果 同时出现一些文字介绍 使用方法: 1.将head中的css样式引入到你的网页中 2.将代码部分拷贝到你的网页body结束前的地方即可 (js.图片采用绝对路径,不建议修改)   代码如下: $(function(){ $('.sgw_img dt').hover(function(){ $

在Word2003文档中用像素方式显示图片大小

  在Word2003文档中,图形或图片的大小默认以厘米为单位表示.用户可以根据实际需要将图形或图片的大小以像素为单位表示,操作步骤如下所述: 第1步,打开Word2003文档窗口,在菜单栏依次单击"工具"→"选项"菜单命令. 第2步,在打开的"选项"对话框中切换到"常规"选项卡,选中"为html功能显示像素"复选框,并单击"确定"按钮,如图2008072306所示. 图20080723

使用jQuery实现图片遮罩半透明坠落遮挡_jquery

默认九宫格图片排列效果,当鼠标悬停在图片上后,会从图片的上方下滑一个半透明遮罩的效果 同时出现一些文字介绍 使用方法: 1.将head中的css样式引入到你的网页中 2.将代码部分拷贝到你的网页body结束前的地方即可 (js.图片采用绝对路径,不建议修改) 复制代码 代码如下: $(function(){     $('.sgw_img dt').hover(function(){         $(this).children('.box').stop(true,true).delay(1

窗体设置成透明之后背景图片的半透明部分会被添加上颜色

问题描述 我将窗口的BackgroundColor的颜色设置成White,将transparencyKey的颜色也设置成White,背景图片用了一张有透明效果的png格式图片,结果运行之后有的地方被填充了白色,如画红色圆圈的地方.有大神知道是什么原因吗?万分感谢~~~~ 解决方案 解决方案二:你应该把BackgroundColor设置成Transparent

Android编程实现设置按钮背景透明与半透明及图片背景透明的方法_Android

本文实例讲述了Android编程实现设置按钮背景透明与半透明及图片背景透明的方法.分享给大家供大家参考,具体如下: Button或者ImageButton的背景设为透明或者半透明: 半透明 复制代码 代码如下: <Button android:background="#e0000000" ... /> 透明 复制代码 代码如下: <Button android:background="#00000000" ... /> 颜色和不透明度 (al

解决 IE6支持图片半透明几种方法

透明格式的PNG24在IE6透明部分将会被灰色替代. 那么,到底有什么方法可以解决这个bug? 解决方法: ①用PNG8格式图片替代PNG24格式的图片     用fireworks导出Alpha模式的PNG8格式的图片,Alpha模式的PNG8格式图片支持半透明,在IE6下全透明以及半透明部分会显示成全透明,并且会存在锯齿.如果对用户体验影响不是很大的话,可以考虑一下用这个方法. ②CSS滤镜     在应用了透明PNG图片的选择器里面加上一下代码: _background: transpar

photoshop保存图片时图片压缩技巧分享

给各位photoshop软件的使用者们来分享一下保存图片时图片压缩技巧. 技巧分享: 最近在做webapp,发现产品图的大小无论怎么压缩都还是有20-30KB,这样的大小在搜索列表页可不是个小数目.经我们的后台提醒,说京东上有一张产品图 220*220px-96dpi-6.62KB~~为了一探究竟,我做了如下实验! 在前端网页中,关于产品图和banner图的压缩,有一个总体的结论: 1.实物图倾向用jpg/jpeg格式; 2.具备较大亮度差异及强烈对比的图像倾向于png格式.   注:本文章最后