clayui 仿苹果工具栏 完美解决图标毛边（黑边）

clayui

仿苹果工具栏 完美解决图标毛边（黑边）

预览：


工程下载

这个是clayui界面库的一个最新的示例，是参照objectDock做的，主要的动态效果都比较完美的实现了,使用方法也一样，直接将桌面上的图标拖进去就可以了。

先来说说图标毛边的问题吧，这个可能部分同学比较感兴趣。

当使用Gdiplus::Bitmap::FromHICON载入一个图标对象时，Gdiplus会丢失掉图标的alpha信息，导致绘制时出现毛边（黑边），我个人觉得这应该是一个BUG，下面给出解决方案

虽然Gdiplus::Bitmap::FromHICON有问题，但是Gdiplus::Bitmap::FromHBITMAP却可以正常工作，不会丢失alpha信息，那么可以先使用GetIconInfo得到图标的ICONINFO，在ICONINFO这个结构里包含有hbmColor，hbmMask这2个HBITMAP对象，hbmColor其实就是图标的图象了，hbmMask是遮罩，得到了这2个HBITMAP，那么就可以根据图标的绘制原理自己加上alpha信息了，具体代码如下：

ICONINFO icInfo = { 0 };
if (!::GetIconInfo(hicon, &icInfo))
return ;

BITMAP bitmap;
GetObject(icInfo.hbmColor, sizeof(BITMAP), &bitmap);
BITMAP bmmask;
GetObject(icInfo.hbmMask, sizeof(BITMAP), &bmmask);

//得到遮罩的图象缓存
BYTE* maskbits = new BYTE[bmmask.bmWidthBytes * bmmask.bmHeight];
::GetBitmapBits(icInfo.hbmMask, bmmask.bmWidthBytes * bmmask.bmHeight, maskbits);

//先从hbmColor创建出Bitmap对象

Gdiplus::Bitmap *pIcon = Bitmap::FromHBITMAP(icInfo.hbmColor, NULL);

BitmapData bmpData;
Rect rect(0,0,pIcon->GetWidth(),pIcon->GetHeight());

//得到Bitmap的图像缓存，这样就可以根据遮罩来自己加入alpha信息了
pIcon->LockBits(&rect, ImageLockModeRead, pIcon->GetPixelFormat(), &bmpData);
BYTE* temp = (bmpData.Stride>0)?((BYTE*)bmpData.Scan0):((BYTE*)bmpData.Scan0+bmpData.Stride*(bmpData.Height-1));

int stride = abs(bmpData.Stride);

//根据遮罩的图象缓存来还原图标原本的alpha信息

for ( int i = 0; i < bmpData.Height; i++)
{
BYTE* Bits = temp + i * stride;

unsigned char* MaskBits = maskbits + (bmpData.Height - 1 - i) * bmmask.bmWidthBytes;
int bitoffset = 0;

for ( int j = 0; j < bmpData.Width; j++ )
{
unsigned char Alpha = ( (*MaskBits << bitoffset ++) & 0x80 )?0:255;

if(Alpha)
{
if(!Bits[j * 4 + 3])
Bits[j * 4 + 3] = Alpha;
}
else
Bits[j * 4 + 3] = 0;

if ( ! (bitoffset % 8) )
{
bitoffset -= 8;
MaskBits++;
}
}
}

delete [] maskbits;
pIcon->UnlockBits(&bmpData);

最后这个pIcon就是含有alpha信息的图标图象了。

然后是动态效果，这个大家看工程里的代码吧，主要的实现方面的也就200多行，都在CIconFrame里，我简单说一下要点吧：

1. 在CIconFrame::OnMM里，根据鼠标与窗口的间距计算窗口的大小，这个也就是窗口随着鼠标移动而改变大小的核心所在了

2. 在CIconFrame::Update里，按照从左到右方式排列窗口，这样做窗口就会紧紧的靠在一起了