[转]循序渐进实现仿QQ界面（二）：贴图按钮的三态模拟

演示程序需要RingSDK库，编译有问题的请看本文的原始链接：http://blog.csdn.net/ringphone/archive/2010/01/10/5171490.aspx，这里就直接进入正题，讲解如何实现贴图按钮的三态模拟。所谓三态，就是按钮的正常状态，鼠标移上去的高亮状态以及按下状态。实际应该还有一个Disable状态，不过这个程序没有不可用的按钮，因此就不实现这个效果了。由于是贴图，不是实际的按钮，因此必须自己处理鼠标消息并进行三种状态的绘制。首先当然要有一个鼠标位置检测函数HitTest，检测鼠标在哪个按钮上面，由于程序的非客户区仅仅是一个尺寸为2的园角矩形框，标题栏是模拟在客户区实现，因此这个HitTest函数是在WM_MOUSEMOVE消息里调用判断，无非是PtInRect进行各个按钮坐标的检测，因此这个HitTest函数的实现这里就不讲解了，看代码就明白了。如果鼠标在按钮区域，该函数返回按钮ID，在系统按钮区域，返回HTMINBUTTON，HTMAXBUTTON，HTCLOSE，方便直接发送系统命令，不在任何按钮，返回HTCAPTION，可以拖动窗口。

如果HitTest返回了按钮ID，用户没按下鼠标，应该绘制按钮的高亮状态。这里有个问题，绘制完了以后，用户继续移动鼠标，但是没移出这个按钮，WM_MOUSEMOVE消息又会检测到需要绘制高亮状态，这样不断绘制就会造成鼠标闪烁，因此需要定义一个m_nCurWhere的成员变量，记录鼠标上一次的HitTest检测值：

C/C++ code

int nWhere = HitTest(...); if (nWhere != m_nCurWhere) { // 需要绘制按钮，高亮或恢复原状 if (nWhere != HTCAPTION) CheckAndDrawButtons(nWhere, 4 ); // 绘制nWhere按钮的高亮状态 else CheckAndDrawButtons(m_nCurWhere, 0 ); // 恢复高亮按钮的原始状态 } m_nCurWhere = nWhere;

这样就保证了各种状态变化，只需要绘制一次。

实现按钮按下状态，需要在WM_LBUTTONDOWN消息里处理，首先当然是进行HitTest检测，这里也要定义一个成员变量m_nCurSysCmd，标记当前是按下了哪个按钮，然后绘制按钮的按下状态。由于用户可能按下了按钮，不松开鼠标进行移动，因此还需要定义一个成员变量m_bInCapture，在WM_LBUTTONDOWN消息里置这个变量为TRUE，SetCapture捕获鼠标，在WM_LBUTTONUP消息里ReleaseCapture释放鼠标，置这个变量为FALSE，这样在WM_MOUSEMOVE里调用的按钮绘制函数就可以根据m_bInCapture判断是该绘制按下状态还是高亮状态。WM_LBUTTONUP消息也可以根据这个标志判断是否该执行按钮动作，否则在别的地方按下鼠标键，移到一个按钮上松开鼠标，执行该按钮功能有点不大对头，应该判断m_bInCapture为TRUE且m_nCurSysCmd与HitTest检测到的按钮相等才执行该按钮的功能。鼠标键按下时的移动，只会对m_nCurSysCmd标记的按钮进行按下状态和正常状态的绘制，其余按钮一概不理。发现QQ2009在这方面没有实现，按下按钮后不松开鼠标键移出按钮，按钮状态不会变化。

按此机制，WM_MOUSEMOVE里的判断应该修改一下了，增加对按钮按下状态的判断：

C/C++ code

RINGMAINMSG(WM_MOUSEMOVE) { int nWhere = HitTest(param); if (m_bInCapture) { // 鼠标键按下状态的移动 if (m_nCurSysCmd == nWhere && m_nCurWhere != nWhere) { // 鼠标从按钮外移入按钮，绘制按下状态按钮 CheckAndDrawButtons(nWhere, 8 ); } else if (m_nCurSysCmd != nWhere && m_nCurSysCmd == m_nCurWhere) { // 鼠标移出按钮，绘制正常状态 CheckAndDrawButtons(m_nCurSysCmd, 0 ); } m_nCurWhere = nWhere; return 0 ; } else { LRESULT res; if (nWhere != m_nCurWhere) { // 需要绘制按钮，高亮或恢复原状 if (nWhere != HTCAPTION) CheckAndDrawButtons(nWhere, 4 ); // 高亮状态 else CheckAndDrawButtons(m_nCurWhere, 0 ); // 恢复原状 } res = DefaultProc(param); m_nCurWhere = nWhere; return res; } }

至此，鼠标对按钮的检测功能已完成，剩下的就是按钮的绘制工作了。按钮的绘制工作分为3块：系统按钮的绘制，用户头像旁边一个可弹出菜单的按钮和编辑个性签名按钮（[我在线上]也是按钮，不过这个与个性签名按钮实现是一样的，这里就省点事，不实现了），以及用户头像下方的工具栏上那一排按钮。系统按钮的绘制采用的是最常见的方法，这里把系统按钮资源图象贴出来大家就知道了，根据需要绘制的状态，只要把图象上相应区域绘制到目标就可以了。如图：



不过这里还是要有个技巧，最下面一排是正常状态按钮，为将来界面调色的需要，处理成了透明的，仅边框和线条是不透明的，这样绘制正常状态按钮的时候就需要恢复背景色，然后透明绘制正常状态的按钮，有点麻烦，因此程序初始化的时候就初始化了系统按钮区域大小的一个内存图片，在WM_PAINT消息里面贴图的时候，顺便就把该正常系统按钮区域的图象绘制到了这个内存图象，这样恢复系统按钮状态只要绘制一遍这个内存图象就可以了。

接下来是绘制工具栏那一排按钮，来看看所需要的资源图片，一共是两幅：




实现的按钮三态效果，第二个是高亮状态，第三个是按下状态：



恩？这个是怎么实现的？关键在第2张资源图片，分为左右两部分，左边是高亮状态，右边是按下状态，每一部分图象是5个像素宽，左右各2像素分别是按钮左右边框，中间1像素是按钮的中间图案，绘制时需要横向拉伸至按钮除去左右边框的宽度。先恢复背景图案，然后绘制高亮状态按钮，最后把整个工具栏图象透明绘制上去就可以了，不会影响已经绘制好的背景。按下状态的绘制稍稍有点不一样，因为需要把按下的按钮图象向右下方偏移1个像素，显得按钮是按下去了，这样就不能一下把整个工具栏图象画上去，需要绘制按下的按钮图象，然后把这个按钮左右边的按钮绘制上去。

用户头像旁边的按钮与工具栏的绘制类似，就不讲解了，看源代码就知道了，代码里面图象的源区域坐标，绘制目的坐标有点绕，需要头脑清楚才不会搞糊涂。需要搞清楚图象库的DrawTo,StretchTo几个函数的参数定义，具体看RingSDK的帮助文件吧。

顺便说一下，图象库的双缓冲绘制操作是直接操作的图象数据，说白了只是一些COLORREF数组数据的搬移，除了绘制文字，根本不需要HDC的参与，因此速度和效率是很高的。

至此贴图按钮的三态模拟完成，还需要实现其他一些功能，工具提示，把工具栏按钮的工具提示加了上去，不过最右边两个“打开消息盒子”和“更改外观”的按钮的工具提示需要额外处理，因为窗口可以调整大小，一改变尺寸原来的坐标就不对了，因此需要动态改变坐标，在哪里改呢，WM_SIZE消息？用户改变窗口尺寸的时候其实是没办法把鼠标移到这两个按钮上的，而且WM_SIZE消息太频繁了，我们只需要在尺寸调整完毕的时候更新一下坐标就行了，这个消息就是WM_EXITSIZEMOVE：

C/C++ code

TOOLINFO ti; CopyRect( & ti.rect, & rc); // rc为更新的坐标 m_tip -> SetToolInfo( & ti);

实际程序里的代码要复杂一些。系统按钮的工具提示没加，有兴趣的可以自己完成，需要跟这两个工具栏按钮一样的处理，更新坐标。

还有是按下用户头像旁按钮弹出菜单，QQ2009这个菜单的最后两项与系统栏图标上弹出的菜单是不一样的，这里就不麻烦了，直接弹出了系统栏图标上弹出的菜单。

个性签名按钮，按下后会显示一个编辑框允许编辑签名，这个不难，麻烦的是这个编辑框需要自动隐藏，处理其EN_KILLFOCUS消息并不能完全实现效果，因为界面上没有别的控件可以抢它的焦点，只有程序失去焦点才会有这个消息，因此需要在WM_LBUTTONDOWN里面再加个判断处理，既然收到WM_LBUTTONDOWN消息，说明是在编辑框外按了鼠标，可以隐藏了。可惜这样做还不够，调整窗口尺寸的时候是点击了非客户区，没有WM_LBUTTONDOWN消息，因此需要在WM_ENTERSIZEMOVE消息里再加个判断处理，这样编辑个性签名的功能才算完善。

至此，这个程序已经实现了所有按钮的三态模拟，系统按钮的功能响应，工具栏按钮的工具提示，可编辑个性签名，可弹出菜单。加了WS_EX_TOOLWINDOW的扩展类型，程序不会出现在任务栏上，没加限制只执行一次程序的功能。有个小小BUG，鼠标移到系统按钮区域，系统按钮显示高亮状态，这时把鼠标快速向上移出窗口，按钮状态不会恢复，因为没有了WM_MOUSEMOVE消息，解决这个问题需要TrackMouseEvent,然后在WM_MOUSELEAVE消息里恢复按钮状态，有兴趣的可以自己解决。

最后看看程序截图：



界面下方的工具栏以后会用不同的方法实现，下一篇，将会讲解如何实现一个激动人心的功能：界面调色。大家打开程序资源，可以看到里面已经有更改外观的设置对话框了，以后会讲解如何自绘控件，实现QQ的这个更改外观对话框。

演示程序下载地址： http://download.csdn.net/source/1982937