关于 AlphaBlend 和 32bpp 的反锯齿图标

在早前的一篇文章中我曾经研究过带有 alpha 通道的图标,实际上 XP 系统已经开始支持这样的图标,也就是32 bpp(bits per pixel)的图标了。在本文最后给出的MSDN链接中可以介绍开发者如何创建 32 bpp 的图标,不过不幸的是,VS开发环境不支持编辑这样的图标,而且原生的Photoshop也不支持(尽管有ICO格式插件),只能借助其他专业的图标制作工具,同样不幸的是,其他图标制作工具我用的并不顺手(至少没有PS那样熟练),所以我只能借助 Photoshop 和图标制作工具两者同时使用,从而可以完成制作 32 bpp 图标。

(一)关于 AlphaBlend;

AlphaBlend 是提供 alpha 通道的贴图的 API 函数,即每个像素都带有一个独立的 alpha 值,去指定该像素在最终合成结果中占据的比例,其作用就相当于Photoshop中的图层蒙版。这是 Msimg32.dll 中提供的函数,因此我们要使用这个函数,用以下语句指定 lib 文件(或在项目属性中添加):

#pragma comment(lib, "Msimg32.lib")

这个函数是从一个 HDC 拷贝到另一个 HDC,选入DC的图片需要具有4个通道,即按照地址从低到高的顺序是B,G,R,A。在提供 alhpa通道的图片格式里比较常用的是PNG格式,在 .net 里,GDI+可以从PNG图片加载出一个位图,然后用 Graphics.DrawImage 就可以看到合成的效果了,使用起来是非常简单的。在 C++ 中的贴图则分为数种(BitBlt,StretchBlt,PlgBlt,MaskBlt,TransparentBlt,AlphaBlend ...),前面大部分都是完整像素的传送和位操作,要实现两个像素的 alpha 合成,显然要使用的是 AlphaBlend,由于这个函数在调用前还有一个特殊要求(如果你没有注意到这个要求,则很可能会对调用结果感到困惑),它在MSDN中的位置比较隐晦,是在介绍其最后一个参数 BLENDFUNCTION 中的一个成员(AlphaFormat)的取值时提到的:

这个要求是:在调用 AlhpaBlend 之前,图片的 alpha 通道必须先应用到 RGB 通道上(premultiplied alpha)。

在之前我的文章中已给出了对一个 CImage 对象应用 alpha 通道的代码。这里我们不继续给出他的代码,现在假设我把一个PNG存储为32bpp的BMP 位图,然后可以从文件加载或者添加到PE文件的资源里面。然后就可以使用 LoadImage 从文件加载或者用 LoadBitmap 从资源加载了,如果从文件加载,必须指定一个标志:LR_CREATEDIBSECTION。

假设从资源中加载了这个位图,我们可以用下面的代码,预先应用 alhpa 通道:

关于 AlphaBlend 和 32bpp 的反锯齿图标关于 AlphaBlend 和 32bpp 的反锯齿图标代码

int i, j;BITMAP bm;BITMAPINFO bminfo;memset(&bminfo, 0, sizeof(bminfo));HBITMAP m_hBitmap = LoadBitmap(hInst, MAKEINTRESOURCE(IDB_BITMAP3));GetObject(m_hBitmap, sizeof(bm), &bm);//在这里应用alpha通道//bminfo//扫描行宽度(实际上图片大小一致)int stride = bm.bmWidthBytes;bminfo.bmiHeader.biSize = sizeof(BITMAPINFOHEADER);bminfo.bmiHeader.biPlanes = 1;bminfo.bmiHeader.biBitCount = 32;bminfo.bmiHeader.biWidth = bm.bmWidth;bminfo.bmiHeader.biHeight = bm.bmHeight;bminfo.bmiHeader.biSizeImage = bm.bmHeight * stride;                       BYTE* lpBits = (BYTE*)malloc(bminfo.bmiHeader.biSizeImage);memset(lpBits, 0xcc, bminfo.bmiHeader.biSizeImage);HDC hDC = GetDC(hWnd);int lines = GetDIBits(hDC, m_hBitmap, 0, bminfo.bmiHeader.biHeight, lpBits, &bminfo, DIB_RGB_COLORS);//应用alpha通道BYTE* pPixel;float alphaFactor;for(j = 0; j< bm.bmHeight; j++){    for(i = 0; i<bm.bmWidth; i++)    {        pPixel = lpBits + j*stride + i*4;        alphaFactor = (float)pPixel[3] / (float)0xff;        pPixel[0] = (BYTE)(pPixel[0] * alphaFactor);        pPixel[1] = (BYTE)(pPixel[1] * alphaFactor);        pPixel[2] = (BYTE)(pPixel[2] * alphaFactor);    }}//SetDIBits(hDC, m_hBitmap, 0, bminfo.bmiHeader.biHeight, lpBits, &bminfo, DIB_RGB_COLORS);ReleaseDC(hWnd, hDC);free(lpBits);//CImage img;//img.Attach(m_hBitmap);//img.Save("应用alpha通道后.bmp");//img.Detach();

下图可直观的看到应用前和应用后的图片的区别,左侧是原始位图,其右侧是应用了Alpha通道后的位图,这就是在调用 AlphaBlend 之前应该选入Src DC的位图。虽然我们可以在运行时再去应用 alpha 通道,但是假如图片是已经确定的话(例如添加到PE的资源),那么我们为什么不先把比较消耗精力的这一步事先做掉呢?

关于 AlphaBlend 和 32bpp 的反锯齿图标

上面的代码中,加载位图以后,为了修改像素,我使用 GetDIBits 函数去获取像素数据的一个拷贝,为此需要提供一个HDC,如果不提供HDC,就无法得到位图的像素(这让我有点不理解,我只想得到DIB的数据而已,不关心设备,但是API一定要求提供HDC有点不合情理),所以这里先获取程序的主窗口的HDC,得到位图数据然后我们把 alhpa 通道数据应用到 RGB 通道上。显然这样处理以后,图片会比原来的“变暗”一些,图像中完全透明的部分在结果中将完全变成黑色,半透明的部分会有所变暗。这样处理的要求可能是 API 觉得这样它的计算量可以有所减少(实际上也没少到哪里去),因为RGB通道可以直接和背景色被加权后(1- alpha/255) 的结果做加法。

这样处理后的位图就可以选入DC,然后调用 AlhpaBlend 函数了。这个函数的参数列表几乎和 TransparentBlt 一致,所以如果你的代码中使用了 TransparentBlt 则前面的参数无须改动,只需注意这个函数最后一个参数是 BLENDFUNCTION,从名称看仿佛是混合函数,实际上它只是一个含有4个整数的结构体而已。这个参数的设置决定了如何合成。SourceConstantAlpha 提供了整体的 Alpha 值,相当于PS中的图层不透明度,它是作用于整体的。Alpha 通道则相当于PS中的蒙版,控制每个像素的参与合成比例,是一对一的作用在每个像素上的。关于成员的设置可以参考MSDN。下面就是使用 AlhpaBlend 的代码:

关于 AlphaBlend 和 32bpp 的反锯齿图标关于 AlphaBlend 和 32bpp 的反锯齿图标代码

HDC hMemDC = CreateCompatibleDC(hdc);HGDIOBJ hOldBitmap = SelectObject(hMemDC, m_hBitmap);BLENDFUNCTION blendFunc;blendFunc.BlendOp = AC_SRC_OVER;blendFunc.BlendFlags = 0;blendFunc.SourceConstantAlpha = 255; //整体的不透明度blendFunc.AlphaFormat = AC_SRC_ALPHA;AlphaBlend(hdc, 150, 50, 256, 256, hMemDC, 0, 0, 256, 256, blendFunc);SelectObject(hMemDC, hOldBitmap);DeleteDC(hMemDC);

效果如下图所示,这是把图像在纯色背景上合成的结果,可以看出图像的半透明部分(例如底部阴影)受到的背景色影响。如果背景是其他图片,则可以看到两个图片合成的结果。

关于 AlphaBlend 和 32bpp 的反锯齿图标

(二)适用于XP系统中的反锯齿图标。

关于 AlphaBlend 就简单说到这里。AlphaBlend 可以使图片完美的融入到任何的背景中,而不必关心背景的内容,这是其最大的优点。图标同样具有这个要求,图标的格式是在 Windows 的早期定义的,那时候的设备条件也远没有发展到现在的地步,所以那时定义的图标,只需要定义透明部分,不透明部分就够了,所以图标的 MASK 基于节省存储空间的考虑被定义成了单色位图(二元图)。然后到了XP时代,随着硬件水平改善,CPU的运算速度,显示器的表达颜色数量,存储设备的空间都大大提高,对 UI 美观性的要求又开始突出起来,仅提高图标图片本身的颜色数量(从16色,256色仅仅提高到24bpp)还不够,于是 XP 引入了带有 alpha 的 32 bpp图标,图标格式的定义没有改变,由于32 bpp 图标具有 alpha 通道,所以其mask数据块已经变得可有可无了,因为其作用完全可以由 alpha 通道提供。实际上从更合理的角度考虑,图标中的每个图片都有一个图片信息头,在图标的图片信息头中,再提供一个 mask 的 bpp 数据(而不是像现在这样一律假定bpp为1),将会比现在的格式定义更完美。显然,使用带有 alpha 通道的图标绘制要比之前的简单图标工作量更大,原来只需要两次位操作性质的数据块传送,效率很高,而 Alpha 合成则无法整块传送,需逐点合成。

现在的 XP 系统中大量的应用了 32 BPP 的图标,这些图标通常带有渐隐的阴影效果,可以完美融合在背景中,因此也称作反锯齿图标。而早期的图标文件的像素要么透明,要么完全可见,因此是能够看出锯齿痕迹的。下面就是这两种图标的显示效果的区别:

关于 AlphaBlend 和 32bpp 的反锯齿图标

上面的是 32 bpp 的图标,可以看到它在任意背景上都能呈现视觉感舒适的阴影效果,而下面的是普通图标,没有办法提供完美的阴影效果。现在商业软件基本都提供了这种反锯齿的 32bpp 图标,比如qq等等。

windows为了适应多种硬件条件考虑,建议图标含有多个图片,首先按照颜色数量(BPP)从低到高排列,然后再同一个BPP中按照尺寸从大到小排列,系统在显示时从图标中按照一些原则(具体准则请参考MSDN)去抽取图标最适合的图片。对 32 BPP的图标,系统的建议是提供 3 种典型尺寸(4848,3232,1616),尺寸2424一般是在开始菜单上使用,属于可选的,三种典型BPP(16色,256色,真彩色(bpp = 24或32))。因此要在程序中使用反锯齿图标,我们通常至少需要 9 幅图片。

但是在IDE中我们没法编辑这样的图标,注意如果导入了32bpp的图标到IDE中也决不能用IDE去做任何修改!否则很可能损坏其显示效果。因此我们需要借助专用的图标制作工具。这里我使用的是:IconWorkshop,这是老外编写的(一般看起来比较好比较强大比较细心的东西的作者不可能是中国人,这是一个规律。。。),网络有免费的汉化版本下载。但是可能是我不熟悉的缘故,它的编辑功能我用的不惯,所以我先在 Photoshop 中编辑图片,然后存储为 PNG 格式,再用 IconWorkshop 打开PNG,然后就是复制粘贴,IconWorkshop 有个很方便的功能,可以自动的以现有图片为基础产生所有其他大小和BPP的图片,然后再保存为 ICO 格式就可以了。

假如不自己制作,也可以借助工具(例如ICONPRO)从系统的 shell32.dll 中导出一些图标,把这样的图标添加到资源中,然后可以绘制他们,但是要注意,不能用常规的方法去做,否则绘制出来的图标是看不到反锯齿效果的。正确的方法是用 LoadImage 指定 LR_CREATEDIBSECTION 去加载图标,然后用 DrawIconEx 去指定大小的去绘制。代码如下:


关于 AlphaBlend 和 32bpp 的反锯齿图标关于 AlphaBlend 和 32bpp 的反锯齿图标代码

int i, left = 10, top = 10;int iconSizes[] = { 16, 24, 32, 48 };for(i = 0; i<4; i++){    Rectangle(hdc, left - 2, top - 2, left + iconSizes[i] + 2, top + 2 + iconSizes[i]);    HICON hIcon = (HICON)LoadImage(hInst, MAKEINTRESOURCE(IDI_ICON3),        IMAGE_ICON, iconSizes[i], iconSizes[i], LR_CREATEDIBSECTION | LR_DEFAULTCOLOR);    DrawIconEx(hdc, left, top, hIcon, iconSizes[i], iconSizes[i], 0, NULL, DI_NORMAL);    //DrawIcon(hdc, left, 80, hIcon);    left += iconSizes[i] + 8;    DestroyIcon(hIcon);}

绘制的效果如下所示,这个图标就是我从 Shell32.dll 中抽取的图标,可以看到其柔和的阴影,我把图标绘制在比真正尺寸少许放大的白色矩形上,这样可以很容易看出图标的尺寸大概有多大,这些图片都是图标实际提供的(而不是从缩放得到),因此能够保证设计时的效果:

关于 AlphaBlend 和 32bpp 的反锯齿图标

反锯齿的图标也可以放在 Static 图形控件中,显示效果是同样的,当然我们要先借助其他工具制作出反锯齿的图标。实际上不仅仅是图标,还有很多位置的小位图,比如自定义绘制菜单项左侧的小位图,各种TreeView,ListView等控件中使用的小位图,可能都是用 32 BPP 的图片通过 alpha 合成来实现的,这样就可达到更柔和更美观的显示效果。

(三)我所编写的范例程序;

(1)我写了一个小范例程序用来演示 AlphaBlend 的效果,同时也可读取一个32BPP的图片(BMP或者PNG格式),然后保存为应用了Alpha通道后的BMP格式位图。这样的结果图片就可以直接添加到项目资源中,然后应用到Alpha合成的场合。这个工具的主要代码在文中已经提供,也没有什么技术含量,因此不再提供源码下载。

(2)我写的另一个小程序用来打开一个ICO文件,然后可以展示图标中每个图像的XOR Mask,AND Mask, XOR中的Alpha通道(仅32bpp具有)部分。右下角是通过加载图标的方式绘制的图标。通过上方的组合框可以切换图片中的图像。这个工具还有一个功能,可以把图标的当前图像另存为 BMP 格式的位图文件(然后就可以在Photoshop中观察其 Alpha 通道)。通过这个工具,主要可以观察 32 bpp 的图标的 Alpha 通道,以帮助理解反锯齿效果的原理,你可看到,AND MASK一定是“锯齿”的,因为它是二元图像只有两种颜色,如果有 Alhpa 通道,Alpha 通道会和AND MASK很像,但是黑白是相反的(因为它们的应用场合不同,因此黑白色的意义也不同,AND MASK 用于在背景上擦出黑色的绘制区域,其白色的意义是“保留背景原样”,Alpha 通道用于像素合成,其白色的意义是“此处像素完全不透明”),Alpha 通道的黑白色之间一般会有柔和的过渡(不然提供 Alpha 通道的意义就不大了),这正是图标绘制出来以后具有反锯齿效果的原因。其效果如下所示:

关于 AlphaBlend 和 32bpp 的反锯齿图标

在这个工具中值得一提的是,对于 bpp 为16的图像在绘制 AND MASK 时必须特别处理,bpp的取值通常是1,4,8,16,24,32。BPP 为 1,4,8 (注意和bpp = 8的灰度图像是有区别的)的彩色索引图像需要图像提供调色板(我在绘制时,把彩色索引图像升级成了 24 bpp 的像素数据块)。bpp等于16,24和32的图像都是通过像素数据块本身来提供 RGB 通道的。bpp=16的特殊在于,它用两个字节(WORD)表示一个像素。

通道如何分布取决于 biCompression的取值:

如果biCompressionBI_RGB,表示无压缩,没有调色板。对于 biCompression 为 BI_RGB 时,从低位到高位每5位表示一个通道(最高位没有用处,也没有 Alpha 通道),每个通道只有 2^5=32 级灰度,三个通道分享两个字节。这样在绘制 AND MASK 时不能使用在 24bpp 及以上的方式去设置像素数据(每个通道可独占一个字节)。例如在 AND MASK 中,白色是 0x7FFF(最高位为0),黑色是 0x0000,最大亮度是31 ( 0x1F )。

如果 biCompressionBI_BITFIELDS,(备注:这个值仅可能在 bpp 为16或32的图像中可能使用),则调色板中提供三个元素,分别是 RGB 通道的 mask ,用于指定某个通道在像素数据的占用的是哪些位。例如如果 RGB 通道各占用 5 位,那么它们的 mask 分别是 0x7C00,0x03E0,0x001F

这个小工具的源码下载链接如下:

https://files.cnblogs.com/hoodlum1980/IconImg_src.rar

参考文献:

(1)本文说明了如何创建WINXP图标(给图标设计师阅读)

ms-help://MS.VSCC.v80/MS.MSDN.v80/MS.WIN32COM.v10.en/dnwxp/html/winxpicons.htm#winxpicons_step5

(2)本文比较重要的是,介绍了如何使用XP风格控件(接受系统样式的管理)。和32位的图标(支持alpha通道)

ms-help://MS.VSCC.v80/MS.MSDN.v80/MS.WIN32COM.v10.en/shellcc/platform/commctls/userex/cookbook.htm

(3)关于ICO文件格式,可以参考我之前写的博客:《[VC6] 图像文件格式数据查看器

在这里我再简要总结下ICO文件格式:

Header:(6个字节。含图像个数)

Entries:(含每个图像的信息,这里的高度等于实际的高度,但这里的尺寸数据大小只有1个字节,因此应该以后面的BitmapInfoHeader中的尺寸为准)

Images:

[0] : BitmapInfoHeader(这里的高度是实际的二倍,图像的大小应该以这里的数据为准)

RGBQUAD[](调色板,它有没有,如果有则含有多少个颜色,都取决于BitmapInfoHeader中的信息, 通常在 bpp<=8 时具有)

XOR MASK Bits(扫描行按照4 bytes 对齐,bpp 由前面的信息指定)

AND MASK Bits(扫描行按照 4 bytes 对齐,bpp = 1)

原文链接: https://www.cnblogs.com/hoodlum1980/archive/2010/10/07/1845338.html

欢迎关注

微信关注下方公众号,第一时间获取干货硬货;公众号内回复【pdf】免费获取数百本计算机经典书籍

原创文章受到原创版权保护。转载请注明出处:https://www.ccppcoding.com/archives/15868

非原创文章文中已经注明原地址,如有侵权,联系删除

关注公众号【高性能架构探索】,第一时间获取最新文章

转载文章受原作者版权保护。转载请注明原作者出处!

(0)
上一篇 2023年2月7日 下午3:55
下一篇 2023年2月7日 下午3:56

相关推荐