CAnimateButton的实现.doc

MFC 动画按钮（异形透明渐变滑过声效等）的实现（一）- 切图透明渐变源码下载： 页面底部（麻烦大家在地址栏里面输一下，百度文档里面不准带文字链接的，所以只能运用图片了！）C瓜哥终于实现CAnimateButton类了，写下来给大家分享下！先看一下效果：PostScript: 新浪的压缩率实在是太高了，把我1个多G的完全无压缩视频压缩成这样儿了！真是的！大家凑合看一下（视频）P.S.就是简单的图像按钮，从网上下来的代码，很多人都做得特别复杂。估计是用的方法是win95时代的方法，所以实现切图都似乎很麻烦（连透明画图的函数都得自己写，实现起来就麻烦了），所以这一次，能用API的地方尽量用API，就不自己写了，这样的话实现起来简单点！1) 做好图片把按钮的几态都放在一张图片里面，觉得这样方便些。按顺序做好图片： Normal、Hovered、Pressed、(Focused、disabled) 最后两个为可选如图：（设计缺口处，是为了观察异形切割按钮时的效果）2）设置窗口样式在PreSubclassWindow中实现：void CAnimateButton:PreSubclassWindow() / TODO: Add your specialized code here and/or call the base classCButton:PreSubclassWindow();ModifyStyle(0, BS_OWNERDRAW);/使图像不会被画到区域以外/*1*/if (NULL != GetSafeHwnd()if (!(GetButtonStyle() & WS_CLIPSIBLINGS)SetWindowLong(GetSafeHwnd(), GWL_STYLE, GetWindowLong(GetSafeHwnd(), GWL_STYLE) | WS_CLIPSIBLINGS);ModifyStyle(0, BS_OWNERDRAW) 增加所有者自绘的样式，这样就不必为应用到该类的按钮都指定了！上面/*1*/处，使图像不会画到按钮区域以外（这样，只要实现按钮区域异形就成了。在按钮上面画图时，图就用不着抠了）但是你可能会说，那图上的mask色又用来干嘛？这个当然是用来取得按钮区域了！注：关于WS_CLIPCHILDREN（1）WS_CLIPCHILDREN样式主要是用于父窗口，也就是说当在父窗口绘制的时候，父窗口上还有一个子窗口，那么设置了这个样 式的话，子窗口区域父窗口就不负责绘制。（2）所有的overlapped和popup风格的窗口，都有WS_CLIPSIBLINGS属性。也就是说这类风格的窗口，你是去不掉WS_CLIPSIBLINGS属性的，不会在它重叠的兄弟窗口绘图；（3）更进一步说明，WS_CLIPSIBLINGS只是用于子窗口（For use with the WS_CHILD style only.）（4） WS_CLIPSIBLINGS实际上还需要和控件的叠放顺序（z order）配合使用,才能看出明显的效果。3）导入图像准备好图像（文件或者图像资源），从BOOL LoadBitmap(TCHAR* szFileName, COLORREF clrTans = RGB(255, 0, 255), BOOL bHasFocusedState = TRUE, BOOL bHasDisabledState = TRUE);BOOL LoadBitmap(UINT nIDBmp, COLORREF clrTans = RGB(255, 0, 255), BOOL bHasFocusedState = TRUE, BOOL bHasDisabledState = TRUE);导入，取得图像句柄，然后把剩余参数一齐传给PrepareBitmap函数处理void CAnimateButton:PrepareBitmap(HBITMAP hBitmap, COLORREF clrTrans, BOOL bHasFocusedState, BOOL bHasDisabledState)m_bHasFocusedState = bHasFocusedState; m_bHasDisabledState = bHasDisabledState;/剪切透明区域/-BitmapToRegion是一个SDK风格的全局函数，在主类中定义-HRGN hRgn = BitmapToRegion(hBitmap, clrTrans, 4);SetWindowRgn(hRgn, TRUE);CBitmap* pBmpWhole = CBitmap:FromHandle(hBitmap);BITMAP bmp;pBmpWhole-GetBitmap(&bmp);m_nBtnWidth = bmp.bmWidth / (3 + (int)(bHasFocusedState + bHasDisabledState);m_nBtnHeight = bmp.bmHeight;m_pMemDC = new CDC;CDC* pDC = GetDC();m_pMemDC-CreateCompatibleDC(pDC);m_pMemDC-SelectObject(pBmpWhole);ReleaseDC(pDC);/调整大小(这样在DrawItem里面才可能限定画的范围)SetWindowPos(NULL, 0, 0, m_nBtnWidth, m_nBtnHeight, SWP_NOMOVE);clrTrans就是mask色，用来抠除的颜色，bHasFocusedState, bHasDisabledState分别指定，是否有按钮Focused状态的图片，是否有失效状态的图片。这样就可以实现3态、4态、5态这几种按钮了其中用到了BitmapToRegion函数我把它定义成了一个全局的函数，其中声明如下：HRGN BitmapToRegion(HBITMAP hBmp, COLORREF cTransparentColor = RGB(255, 0, 255), COLORREF cTolerance = 0x101010, int nSplit = 1);实现代码太多，这里就不贴了，大家看源码吧。原理就是，根据指定的hBmp和图像分割分数nSplitc，抠除TransparentColor色。然后得到一个抠除了mask色区域的句柄！设置窗口区域为这个区域，这样就可以实现按钮窗口的异形了！大家估计会疑惑nSplit是干嘛用的。其实nSplit就是指定图像被分割的份数（也就是按钮有几个状态），然后用这个函数只处理第一份（图像的1 / nSplit）！然后得到一些基本信息，把整个图像选入成员变量m_pMemDC中。 4）实现MouseHover、MouseLeave效果似乎VC+中不能响应鼠标hover、leave的消息什么的，其实不然！系统中真的存在WM_MOUSEHOVER、WM_MOUSELEAVE这样的消息。用_TrackMouseEvent函数在MouseMove中分发两种消息void CAnimateButton:OnMouseMove(UINT nFlags, CPoint point) / TODO: Add your message handler code here and/or call defaultif(m_bAllowTrack)TRACKMOUSEEVENT tme;tme.cbSize = sizeof(TRACKMOUSEEVENT);tme.dwFlags = TME_HOVER | TME_LEAVE;tme.dwHoverTime = 1;/HOVER_DEFAULT;tme.hwndTrack = m_hWnd;_TrackMouseEvent(&tme);m_bAllowTrack = FALSE;CButton:OnMouseMove(nFlags, point);m_bAllowTrack，设置跟踪的时机。一定要响应了WM_LEAVE之后，才能再次执行以下的代码段（不然，程序就会不停分发消息，就乱套了！）然后，添加WM_MOUSEHOVER、WM_MOUSELEAVE的消息响应，afx_msg void OnMouseHover(WPARAM wParam, LPARAM lParam);afx_msg void OnMouseLeave(WPARAM wParam, LPARAM lParam);ON_MESSAGE(WM_MOUSEHOVER, OnMouseHover)ON_MESSAGE(WM_MOUSELEAVE, OnMouseLeave)在其中，初始化变量，然后开始定时器大家先不要管PlaySound代码段，那个放到后面再给大家说。void CAnimateButton:OnMouseHover(WPARAM wParam, LPARAM lParam)/m_bHoverIn = TRUE;m_nTrans = 0;m_nStartPos = m_nBtnWidth;if(!m_strSndHover.IsEmpty()PlaySound(m_strSndHover, NULL, SND_ASYNC | SND_FILENAME); else if(m_nIDSndHover)PlaySound(MAKEINTRESOURCE(m_nIDSndHover), NULL, SND_ASYNC | SND_RESOURCE);SetTimer(ID_TIMER, 10, NULL);void CAnimateButton:OnMouseLeave(WPARAM wParam, LPARAM lParam)m_bAllowTrack = TRUE;/m_bHoverIn = FALSE;m_nTrans = 0;m_nStartPos = 0;SetTimer(ID_TIMER, 10, NULL);定时器中，主要用AlphaBlend函数实现之前保存好的内存DC的绘制！/渐变效果在这里实现void CAnimateButton:OnTimer(UINT nIDEvent) / TODO: Add your message handler code here and/or call defaultCDC* pDC = GetDC();if(m_nTrans = 255)KillTimer(ID_TIMER);return;m_nTrans += 3;m_bf.SourceConstantAlpha = m_nTrans;:AlphaBlend(pDC-m_hDC, 0, 0, m_nBtnWidth, m_nBtnHeight, m_pMemDC-m_hDC, m_nStartPos, 0, m_nBtnWidth, m_nBtnHeight, m_bf);ReleaseDC(pDC);CButton:OnTimer(nIDEvent);m_nTrans就是透明度，在Timer中大于了255时就停止计时。大家一定要搞清楚这个逻辑，这样实现的效果才会平滑（我之前就是没想清楚，同时画两块图，一块用来淡入，另外一块用来淡出，做到后面实在是没法做下去了 囧|）m_nStartPos 用于指定m_pMemDC，用来开始绘图的地方。因为几个状态，全部画在这个内存DC里面，所以要选对开始画的位置，画的宽度，就是一个状态图的宽度啦！用AlphaBlend来画透明图像。各项参数，大家查一下MSDN就知道了。C瓜哥就不详述啦 最后一个参数是BLENDFUNCTION，这是一个结构体。m_bf就是这个的变量。在构造函数中初始化：m_bf.BlendOp = AC_SRC_OVER;m_bf.BlendFlags = 0;m_bf.AlphaFormat = 0;所以在Timer里面只要指定透明度SourceConstantAlpha就行了5）在DrawItem中自绘按钮重头戏来了，自绘，实现DrawItem（一定是虚函数那个哦，不是WM_DRAWITEM哦，不要看错了！）/绘制(注意一定要用的是虚函数那个DrawItem哦)void CAnimateButton:DrawItem(LPDRAWITEMSTRUCT lpDIS) / TODO: Add your code to draw the specified itemCDC* pDC = CDC:FromHandle(lpDIS-hDC);pDC-SetBkMode(TRANSPARENT);CRect rcItem = lpDIS-rcItem;int nState = lpDIS-itemState;int nAction = lpDIS-itemAction;if(nAction & ODA_SELECT)m_nTrans = 0;if(m_bPressDown)m_nStartPos = m_nBtnWidth * 2;/Press状态图elsem_nStartPos = m_nBtnWidth;/Hover状态图SetTimer(ID_TIMER, 10, NULL);else if(nAction & ODA_FOCUS)/ if(m_bHasFocusedState)/ / pDC-BitBlt(rcItem.left, rcItem.top, rcItem.Width(), rcItem.Height(),/ m_pMemDC, m_nBtnWidth * 3, 0, SRCCOPY);/ elseif(!m_bEnable)if(m_bHasDisabledState)/有禁用状态图片pDC-BitBlt(rcItem.left, rcItem.top, rcItem.Width(), rcItem.Height(),m_pMemDC, m_nBtnWidth * (3 + (int)(m_bHasFocusedState), 0, SRCCOPY);else/没有禁用状态图片，就加一个灰度TRACE(_T(正在画灰色状态.n);CBitmap grayBmp;grayBmp.CreateCompatibleBitmap(pDC, rcItem.Width(), rcItem.Height();CDC memDC;memDC.CreateCompatibleDC(pDC);memDC.SelectObject(&grayBmp);CBrush brush;brush.CreateSolidBrush(RGB(100, 100, 100);memDC.FillRect(&rcItem, &brush);pDC-BitBlt(rcItem.left, rcItem.top, rcItem.Width(), rcItem.Height(),m_pMemDC, 0, 0, SRCCOPY);BLENDFUNCTION bf;bf.BlendOp = AC_SRC_OVER;bf.BlendFlags = 0;bf.AlphaFormat = 0;bf.SourceConstantAlpha = 100;:AlphaBlend(pDC-m_hDC, 0, 0, rcItem.Width(), rcItem.Height(), memDC.m_hDC, 0, 0, rcItem.Width(), rcItem.Height(), bf);else/正常状态pDC-BitBlt(rcItem.left, rcItem.top, rcItem.Width(), rcItem.Height(),m_pMemDC, 0, 0, SRCCOPY);/ if(!m_strBtnText.IsEmpty()/ pDC-DrawText(m_strBtnText, &rcItem, DT_CENTER | DT_VCENTER |DT_SINGLELINE);ReleaseDC(pDC);熟悉自绘的童鞋就很容易看懂了。之前没做过自绘的也容易看懂，呵呵DrawItem就是把按钮的几个状态的图像画出来，如果是处理对应状态，那个状态就不会被显示了！DRAWITEMSTRUCT这个结构体：typedef struct tagDRAWITEMSTRUCT UINT CtlType; /控件类型，这里就不用管了 UINT CtlID; /控件ID UINT itemID; /用于菜单的ID，这里也不用管了 UINT itemAction;/自绘动作，如被选中这个动作 UINT itemState; /自绘状态，如被选中后的状态 HWND hwndItem; /控件的窗口句柄 HDC hDC; /控件的hDC RECT rcItem; /控件的矩形区域 DWORD itemData;/跟按钮控件无关 DRAWITEMSTRUCT;注：之所以不用WM_DRAWITEM，是因为那个是给父类用的，在父类中实现控件的绘制。这样就不符合做一个按钮类的要求了，所以不用这个只所以用ODA_XXXXX（如ODA_SELECT、ODA_FOCUS），而不用ODS_XXXX，是因为ODA是瞬时量，是动作。而ODS_XXXX是状态量。我们看的不是过程吗？所以，就必须用这个! 处理ODA_SELECT时， 会被激发两次（按下与弹起），所以必须区分这两种状态，分别处理！添加成员变量m_bPressDown，然后在OnLButtonDown与OnLButtonUp给其赋值，以便在DrawItem中判断！（详见源代码）这里有个问题，为什么选中时还要用Timer渐变显示，而（else语句后）正常状态，不是那样？原因就是正常状态（Normal状态）只有界面需要刷新显示的时候才会调用，不信你试试（所以不会影响渐变过渡的平滑的）有些童鞋可能看不懂，比如nAction & ODA_SELECT中的&。当然，大家都知道是位与运算。但是有些童鞋可能就不知道其在这里的含义了。(A | B)有点加法的味道，不过1 + 1 = 1 A 0000 0000 1010 1010 B 0000 0000 0100 1011 | - 0000 0000 1110 1011这样就把A与B的所有标志位合在了一起，即实现了“相加”(A & B)有点乘法的感觉哦 A 0000 0000 1010 1010 B 0000 0000 0100 1011 & - 0000 0000 0000 1010这样就找出了A与B共同的地方，如果没有就是0了！就可以依此判断nAction中是否包含ODA_SELECT了！注：按钮得到状态的ODA_FOCUS,还尚未实现（未完待续）MFC 动画按钮（异形透明渐变滑过声效等）的实现（二）- 3D文字、滑过声效、动态光标以下就比较简单了，分别实现就行了！1）3D文字实现方法，把每个状态图都画上3D文字这样实现的漏洞，C瓜哥自己也发现了，就是在改变按钮文字的时候，不能清除上一次的文字！设置了一些常量TEXT3D_STROKE等，支持效果的叠加（|），如下：因为参数太多，所以把参数放到一个结构体里面，并赋了一个初值（这样就不必为所以成员赋值了）enum TEXT3D_NONE,/无3D效果TEXT3D_STROKE,/描边TEXT3D_SHADOW/阴影;struct AnibtnTextOpinionUINT nFormat;/文字对齐方式(和CDC:DrawText中的nFormat一个含义)CFont* pFont;/字体COLORREF clrText;/文字颜色UINT n3DStyle;/3D效果种类(可合成)COLORREF clrBorder;/描边颜色(如果n3DStyle中无TEXT3D_STROKE,将忽略此参数)UINT nBorderThickness;/边缘厚度(如果n3DStyle中无TEXT3D_STROKE,将忽略此参数)UINT nOffsetShadow;/阴影距离(如果n3DStyle中无TEXT3D_SHADOW,将忽略此参数)AnibtnTextOpinion()nFormat = 37;/即DT_SINGLELINE | DT_CENTER | DT_VCENTERpFont = NULL;clrText = 0;n3DStyle = TEXT3D_NONE;clrBorder = 0;nBorderThickness = 1;nOffsetShadow = 2;看起来有点畸形，不过struct用法和class差不多/设置按钮文字void CAnimateButton:SetBtnText(LPCTSTR lpszString, AnibtnTextOpinion ato)m_strBtnText = lpszString;CRect dcRect(0, 0, m_nBtnWidth, m_nBtnHeight);m_pMemDC-SetBkMode(TRANSPARENT);m_pMemDC-SetTextColor(ato.clrText);/ CBrush brush;/ brush.CreateSolidBrush(clrText);/ m_pMemDC-SelectObject(&brush);/字体：if(ato.pFont)m_pMemDC-SelectObject(ato.pFont);elseLOGFONT lf;m_pMemDC-GetCurrentFont()-GetLogFont(&lf); lf.lfCharSet=DEFAULT_CHARSET; lf.lfHeight=0; lf.lfWidth=0; strcpy(lf.lfFaceName,微软雅黑); CFont font;font.CreateFontIndirect(&lf); m_pMemDC-SelectObject(&font);CPen penBorder(PS_SOLID, ato.nBorderThickness, ato.clrBorder);for(int i = 1 ; i SelectObject(&brush);m_pMemDC-SetTextColor(RGB(128, 128, 128);CRect rcShadow = dcRect;rcShadow.OffsetRect(ato.nOffsetShadow, ato.nOffsetShadow);m_pMemDC-DrawText(m_strBtnText, &rcShadow, ato.nFormat);/m_pMemDC-SelectObject(pOldBrush);m_pMemDC-SetTextColor(ato.clrText);/只描轮廓不填充（这样看起来才平滑）if(ato.n3DStyle & TEXT3D_STROKE)m_pMemDC-SelectObject(&penBorder);m_pMemDC-BeginPath();m_pMemDC-DrawText(m_strBtnText, &dcRect, ato.nFormat);m_pMemDC-EndPath();m_pMemDC-StrokePath();penBorder.DeleteObject();m_pMemDC-DrawText(m_strBtnText, &dcRect, ato.nFormat);dcRect.OffsetRect(m_nBtnWidth + i % 3, i % 3);/不过最后一次白移动了文字阴影：偏移一个位置(ato.nOffsetShadow, ato.nOffsetShadow) 换个颜色（灰色）再画一遍文字就行了文字描边：把文字转化成路径，然后StrokePath 。这里注意一下，这是一定要只描轮廓不填充（不要用StrokeAndFillPath），这样看起来才平滑（至少用GDI画图是这样）。2）改变光标、动态光标用SetCursor来设置光标文件或者资源，然后发送WM_SETCURSOR实现光标的变化WM_SETCURSOR的响应函数：BOOL CAnimateButton:OnSetCursor(CWnd* pWnd, UINT nHitTest, UINT message) / TODO: Add your message handler code h