Hoodlum1980 (fafa)'s Technological Blog

Languages mainly using and digging: C / CPP, ASM, C#, Python. Other languages:Java.

博客园 首页 新随笔 联系 订阅 管理

    在早前的一篇文章中我曾经研究过带有 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 通道:

 

 

代码
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的资源),那么我们为什么不先把比较消耗精力的这一步事先做掉呢?

 

    

 

    上面的代码中,加载位图以后,为了修改像素,我使用 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 的代码:

  

代码
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);

 

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

 

    

 

    (二)适用于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 的图标,这些图标通常带有渐隐的阴影效果,可以完美融合在背景中,因此也称作反锯齿图标。而早期的图标文件的像素要么透明,要么完全可见,因此是能够看出锯齿痕迹的。下面就是这两种图标的显示效果的区别:

 

    

 

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

 

    windows为了适应多种硬件条件考虑,建议图标含有多个图片,首先按照颜色数量(BPP)从低到高排列,然后再同一个BPP中按照尺寸从大到小排列,系统在显示时从图标中按照一些原则(具体准则请参考MSDN)去抽取图标最适合的图片。对 32 BPP的图标,系统的建议是提供 3 种典型尺寸(48*48,32*32,16*16),尺寸24*24一般是在开始菜单上使用,属于可选的,三种典型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 去指定大小的去绘制。代码如下:

 

代码
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 中抽取的图标,可以看到其柔和的阴影,我把图标绘制在比真正尺寸少许放大的白色矩形上,这样可以很容易看出图标的尺寸大概有多大,这些图片都是图标实际提供的(而不是从缩放得到),因此能够保证设计时的效果:

 

    

 

    反锯齿的图标也可以放在 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 通道的意义就不大了),这正是图标绘制出来以后具有反锯齿效果的原因。其效果如下所示:

 

    

 

    在这个工具中值得一提的是,对于 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)

 

posted on 2010-10-07 23:38  hoodlum1980  阅读(4540)  评论(0编辑  收藏  举报