利用按钮自绘制作图形按钮

1、利用按钮自绘制作图形按钮 - VC2007-06-29 09:02:12|  分类： vc+,c+,c |  标签：按钮  vc+  编程   |字号大中小 订阅 利用按钮自绘制作图形按钮 我们要举的例子是利用一张包含按钮的三种状态(鼠标移动，鼠标离开，鼠标单击)的位图来绘制按钮,因为三种状态在一张位图上，所以每种状态的图片高度都相等，而宽度是位图总长度的1/3。 1.首先创建一个CBitmapButton的子类CHoverButton，并创建四个类成员变量：/指示鼠标是否在

2、按钮上面BOOL m_bHover;/按钮是否跟踪到鼠标BOOL m_bTracking;/保存图片的变量CBitmap mybitmap;/按钮尺寸CSize m_ButtonSize;2.在类的构造函数中，初始化和鼠标相关的变量CHoverButton:CHoverButton()m_bHover = FALSE; m_bTracking = FALSE; 3.创建一个载入位图的成员函数，参数为位图的资源标识符。在按钮自绘之前，必须有相应的位图已经载入。BOOL LoadBitmap(UINT bitmapid); 其实现为：BOOL CHoverButton:LoadBitmap(UIN

3、T bitmapid)/载入图片mybitmap.Attach(:LoadImage(:AfxGetInstanceHandle(),MAKEINTRESOURCE(bitmapid), IMAGE_BITMAP,0,0,LR_LOADMAP3DCOLORS);BITMAP bitmapbits;/获取位图信息并存入bitmapbits结构中mybitmap.GetBitmap(&bitmapbits);/取位图相应的高度和1/3宽度。m_ButtonSize.cy=bitmapbits.bmHeight;m_ButtonSize.cx=bitmapbits.bmWidth/3;Set

4、WindowPos( NULL, 0,0, m_ButtonSize.cx,m_ButtonSize.cy,SWP_NOMOVE |SWP_NOOWNERZORDER );return TRUE;4.重载按钮的虚拟函数DrawItem()成员函数当一个自绘按钮的外观发生变化时由框架调用.其函数原型为：virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct );DRAWITEMSTRUCT结构包含被绘制项目的信息。下面是该函数的实现void CHoverButton:DrawItem(LPDRAWITEMSTRUCT lpDrawItemS

5、truct)/获取保存在DRAWITEMSTRUCT结构中且在绘制按钮时必须使用的设备上下文CDC* mydc=CDC:FromHandle(lpDrawItemStruct->hDC);/创建兼容的设备上下文CDC* pMemDC = new CDC;pMemDC -> CreateCompatibleDC(mydc);/保存旧对象CBitmap * pOldBitmap;pOldBitmap = pMemDC -> SelectObject(&mybitmap);CPoint point(0,0); /判断按钮是否处于选择状态，如果是则绘制选择状态的按钮位图，在我

6、们提供的位图中，选中状态的按钮图片是第二个if(lpDrawItemStruct->itemState & ODS_SELECTED)mydc->BitBlt(0,0,m_ButtonSize.cx,m_ButtonSize.cy,pMemDC,m_ButtonSize.cx,0,SRCCOPY);else /判断鼠标是否离开还是在按钮上面，以便绘制相应的位图if(m_bHover)mydc->BitBlt(0,0,m_ButtonSize.cx,m_ButtonSize.cy,pMemDC,m_ButtonSize.cx*2,0,SRCCOPY);elsemydc-

7、>BitBlt(0,0,m_ButtonSize.cx,m_ButtonSize.cy,pMemDC,0,0,SRCCOPY); / clean uppMemDC -> SelectObject(pOldBitmap);delete pMemDC;tme.cbSize = sizeof(tme);tme.hwndTrack = m_hWnd;tme.dwFlags = TME_LEAVE|TME_HOVER;tme.dwHoverTime = 1;m_bTracking = _TrackMouseEvent(&tme);CBitmapButton:OnMouseMove(n

8、Flags, point);LRESULT CHoverButton:OnMouseLeave(WPARAM wparam, LPARAM lparam)m_bTracking = FALSE;m_bHover=FALSE;/重画按钮Invalidate(TRUE);return 0;LRESULT CHoverButton:OnMouseHover(WPARAM wparam, LPARAM lparam) m_bHover=TRUE;Invalidate(TRUE);return 0;6.我们把这个按钮放入对话框进行测试，首先在基于对话框的应用程序中加入一个按钮，设置其Owner Draw

9、的属性为true。然后添加一个按钮控件变量，然后用CHoverButton类代替CButton类CHoverButton m_HoverButton;最后在对话框的OnInitDialog()处理函数中加入下面一行代码来为按钮的自绘作准备:m_HoverButton.LoadBitmap(IDB_BITMAP1);自绘按钮的实现如果你希望能够在自己的程序中表现出新意，那么你一定不会仅仅满足于MFC提供那些标准控件。这时，我们就必须自己另外多做些工作了。就改变控件外观这一点来说，主要是利用控件的自绘功能（Owner Draw）实现的。本篇将和各位一起定义一个XP风格的CXPButton按钮类，目

10、的不在于介绍CXPButton类的使用技巧，而在于向各位阐述实现自绘按钮的方法。当然如果你觉得CXPButton有用的话，也可以把它的源文件保存下来，直接加入到自己的项目中。 本篇要点： 一、准备工作 二、实现原理及难点 三、按钮类的使用 四、小结与提示 五、附录   一、准备工作 在开始编码之前，首先应该确定好，更准确的说应该是设计好按钮在各种状态下的外观。按钮控件的几中基本状态包括： Normal状态，就是按钮一开始显示时的样子。 Over状态，鼠标指针移动到按钮上面时按钮显示的样子。 Down状态，按下按钮时显示的样子。 Focus状态，按钮按下后松开的样子，例如标准按钮按下松

11、开之后会看到按钮内部有一个虚线框。 Disable状态，当然就是按钮被设置成无效的时候的样子啦。 我参考了一下WindowsXP中普通按钮的实际样子，设计出XP按钮各种状态的外观，如下图所示： 至于Down状态主要是在Over状态的基础上将文字往右下的方向稍微平移，以实现下压的效果。 二、实现原理及难点 下面我们开始类的创建，在Workspace的ClassView页中右击列表树的根结点，选择New Class   在弹出窗口中进行派生类的定义，如下图所示，注意，你需要填写的只有Name和Base class两项，其余的选项保持默认值就可以了。   按OK按钮退出之后，我们

12、可以在ClassView里面看到新创建的类的名字。接下来我们可以为CXPButton类添加各种成员变量。因为自绘控件说穿了就是画图，所以在成员变量中可以看到各种与画图有关的数据类型，一般来说成员变量会在类的构造函数中初始化，在类的析构函数中销毁。详细代码请参见本篇附带的源程序。 下面简要叙述一下按钮的实现原理： 1. 在控件初始化时为按钮添加Owner Draw的属性。这是因为在MFC中，要想激活控件的自绘功能，要求该控件的属性中必须包含属性值BS_OWNERDRAW，这一步我们可以通过类向导为CXPButton类添加PreSubclassWindow()函数，在该函数中完成属性值的设置。当激

13、活控件的自绘功能之后，每次控件状态改变的时候都会运行函数DrawItem()，该函数的作用就是绘制控件在各种状态下的外观。 2. 添加WM_MOUSELEAVE消息函数，当鼠标指针离开按钮时，触发该消息函数，我们在函数中添加代码，通知DrawItem函数鼠标指针已经离开了，让按钮重绘。 3. 添加WM_MOUSEHOVER消息函数，当鼠标指针位于按钮之上时，触发该消息函数，我们在函数重添加代码，通知DrawItem函数鼠标指针现在正在按钮的上面，让按钮重绘。 4. 添加DrawItem函数。在DrawItem中根据按钮当前的状态绘制按钮的外观。可以说自绘控件的大部分功能都是在这个函数中实现的。

14、DrawItem函数包含了一个LPDRAWITEMSTRUCT的指针，本篇会在稍后予以讲解。 了解了基本的设计思路之后，剩下就看我们怎么去实现了。我本人觉得这里有两个难点，首先是WM_MOUSELEAVE和WM_MOUSEHOVER不是标准的Windows消息函数，它们不能通过类向导来添加，所有的添加工作都需要通过手工输入代码来完成。另一个难点是DrawItem中的LPDRAWITEMSTRUCT指针，它指向了一个DRAWITEMSTRUCT的结构，这个结构中包含了控件的各种细节，为我们提供了实现自绘功能的必要信息。 难点一：事实上WM_MOUSELEAVE和WM_MOUSEHOVER两个Wi

15、ndows消息是通过WM_MOUSEMOVE消息触发的，而WM_MOUSEMOVE是标准的Windows消息，因此我们可以通过类向导来为CXPButton类添加WM_MOUSEMOVE消息函数。   函数的代码见如下，这段代码非常有用，在其它的自绘控件中，如果想触发WM_MOUSELEAVE和WM_MOUSEHOVER消息，也是使用类似的方法实现的。 view source print?01.void CXPButton:OnMouseMove(UINT nFlags, CPoint point)  02. 03.     

16、  / TODO: Add your message handler code here and/or call default 04.       if (!m_bTracking) 05.        06.              TRACKMOUSEEVENT tme; 07. 

17、;             tme.cbSize = sizeof(tme); 08.              tme.hwndTrack = m_hWnd; 09.             

18、60;tme.dwFlags = TME_LEAVE | TME_HOVER; 10.              tme.dwHoverTime = 1; 11.              m_bTracking = _TrackMouseEvent(&tme); 12.   &#

19、160;    13.       CButton:OnMouseMove(nFlags, point); 14.我们接着添加WM_MOUSELEAVE和WM_MOUSEHOVER消息消息函数。在CXPButton类的声明中（即在XPButton.h文件中）找到afx_msg void OnMouseMove(UINT nFlags, CPoint point);的函数声明，紧接其下输入 view source print?1.afx_msg LRESULT OnMouseLeave(WPARA

20、M wParam, LPARAM lParam); 2.afx_msg LRESULT OnMouseHover(WPARAM wParam, LPARAM lParam);然后在XPButton.cpp文件中找到ON_WM_MOUSEMOVE()，紧接其后输入 view source print?1.ON_MESSAGE(WM_MOUSELEAVE, OnMouseLeave) 2.ON_MESSAGE(WM_MOUSEHOVER, OnMouseHover)当然最后还有函数的实现了，详细代码可见本篇提供的源程序，这里就不再重复了。 难点二： 下面我们看看DRAWITEMSTRUCE结构为我

21、们提供了哪些有用信息呢？ DRAWITEMSTRUCT结构的定义如下： view source print?01.typedef struct tagDRAWITEMSTRUCT 02.    UINT   CtlType;                       /控件类型 03.  

22、0; UINT   CtlID;                          /控件ID 04.    UINT   itemID;          &

23、#160;             /菜单项、列表框或组合框中某一项的索引值 05.    UINT   itemAction;                   /控件行为 06.    UINT

24、   itemState;                     /控件状态 07.    HWND   hwndItem;                

25、/父窗口句柄或菜单句柄 08.    HDC    hDC;                           /控件对应的绘图设备句柄 09.    RECT   rcItem;  &#

26、160;                     /控件所占据的矩形区域 10.    DWORD  itemData;                  /列表框或组合框中某一项

27、的值 11. DRAWITEMSTRUCT, *PDRAWITEMSTRUCT, *LPDRAWITEMSTRUCT;其实不仅是按钮控件，其它控件，如ComboBox、ListBox、StaticText等都是通过DRAWITEMSTRUCT来记录控件信息的。关于这个结构的详细文档可参考本篇的附录。 也许你早已看到许多自绘按钮的例子，实际上自绘按钮本身的函数结构都是差不多的，它们显示效果的区别主要取决于代码编写者对GDI作图函数的运用与掌握程度。有兴趣的朋友可以研究一下CXPButton类中DrawItem函数的数据结构，其实只要修改一下其中GDI绘图函数的部分代码，马上又能做出另一个自绘按钮

28、控件了。  三、按钮类的使用 下面演示CXPButton类的使用。往对话框中添加一个按钮控件，假设它的ID值为IDC_BUTTON1。进入类向导（Class Wizard）的Member Variables属性页，为IDC_BUTTON1添加一个变量m_btnNormal。确定退出后再进行编译，就可以看到重新定义过XP风格按钮了。 如果你是之间把CXPButton的源文件引入自己的工程中的，那么在上图的Variable type中是看不到CXPButton选项的。但是可以通过以下方法加入： 1. 首先保存工程后退出。 2. 在工程的目录下找到一个后缀名为.clw的文件，将其删除。但是

29、为了以防万一还是建议你实现备份一下。 3. 重新打开工程，进入类向导，此时会看到一下一个弹出对话框，我们选择“是（Yes）”。   4. 再选择“Add All”，这样我们就可以在类向导中使用CXPButton的变量类型了。 四、小结与提示 对于按钮来说，当按钮上面任何可见的部分发生变换的时候，都要调用DrawItem函数进行重绘。自绘制按钮必须设定BS_OWNERDRAW的属性，设置的代码在PreSubclassWindows函数中完成。另外为了防止系统字体设置的变化影响控件的表达效果，还可以在该函数中为控件指定某种固定的字体。但是要注意的是这个 让我们来回顾一下实现自绘按钮的基本

30、步骤： a. 确定设计方案； b. 初始化，但是记得要在函数退出前恢复先前的GDI对象，并释放所占领的资源； c. 添加相应消息函数； d. 添加绘图函数DrawItem，在DrawItem中作图的顺序一般是先画外边框，再上底色，接着写文字，最后是画内边框。不过有些人也喜欢把边框放到最后画，这问题不大。 五、附录 DRAWITEMSTRUCT结构文档（根据Msdn翻译） DRAWITEMSTRUCT DRAWITEMSTRUCT 为需要自绘的控件或者菜单项提供了必要的信息。在需要绘制的控件或者菜单项对应的WM_DRAWITEM消息函数中得到一个指向该结构的指针。 DRAWITEMSTRUCT结

31、构的定义如下： view source print?01.typedef struct tagDRAWITEMSTRUCT 02.UINT CtlType;  03.UINT CtlID;  04.UINT itemID;  05.UINT itemAction;  06.UINT itemState;  07.HWND hwndItem;  08.HDC hDC;  09.RECT rcItem;  10.ULONG_PTR itemData;  11. DRAWITEMSTRUCT;结构成员： Ctl

32、Type 指定了控件的类型，其取值如下表所示。 取值 描述 ODT_BUTTON 按钮控件 ODT_COMBOBOX 组合框控件 ODT_LISTBOX 列表框控件 ODT_LISTVIEW 列表视图控件 ODT_MENU 菜单项 ODT_STATIC 静态文本控件 ODT_TAB Tab控件 CtlID 指定了自绘控件的ID值，而对于菜单项则不需要使用该成员 itemID表示菜单项ID，也可以表示列表框或者组合框中某项的索引值。对于一个空的列表框或组合框，该成员的值为1。这时应用程序只绘制焦点矩形（该矩形的坐标由rcItem 成员给出）虽然此时控件中没有需要显示的项，但是绘制焦点矩形还是很有必要的，因为这样做能够提示用户该控件是否具有输入焦点。当然也可以设置itemAction 成员为合适值，使得无需绘制焦点。itemAction 指定绘制行为，其取值可以为下表中所示值的一个或者多个的联合。取值描述ODA_DRAWENTIRE当整个控件都需要被绘制时，设置该值ODA_FOCUS如果控件需要在获得或失去焦点时被绘制，则设置该值。此时应该检查itemS