基于OnPaint的Slider进度条自绘实现

原理:

控件绘制总会调用onpaint函数。

slider控件分为四个区域、背景区、通道背景区、左边通道进度区、滑块区四个区域。

通过Slider控件的成员函数 GetClientRect可以轻易获取控件背景区域大小。

通过Slider控件的成员函数 GetChannelRect可以轻易获取通道背景区域大小。

通过Slider控件的成员函数 GetThumbRect可以轻易获取滑块区域大小。

可以根据GetThumbRect获取的区域调整自绘滑块区域。

根据通道背景区域和滑块区域可以计算通道左边进度显示区域。

说明:

本文为GDI绘图实现，如需支持图片绘制，对应区域绘制响应图片即可。

效果一：正常播放状态

效果二：选中状态

效果三：拖动状态

绘制时绘制顺序:

1、绘制控件底色

2、绘制通道背景色

3、绘制通道左边进度区域。

4、绘制滑块色

滑块颜色变化可以根据滑块选取状态切换。

代码如下:

redraw_slider.h:

#pragma once/*功能：实现进度条的重绘作者：JC时间：2017.06.28*/#include "afxcmn.h"class redraw_slider : public CSliderCtrl{public:redraw_slider();virtual ~redraw_slider() { delete_gdi_objs(); }afx_msg void OnPaint();afx_msg void OnLButtonDown(UINT nFlags, CPoint point);afx_msg void OnLButtonUp(UINT nFlags, CPoint point);afx_msg void OnMouseMove(UINT nFlags, CPoint point);DECLARE_MESSAGE_MAP()public://设置背景色void set_bk_color(COLORREF bk) { m_dlg_bk_color = bk; }//设置滑块比率void set_thumb_rate(float rate) { m_thumb_rate = rate; }//设置滑块颜色void set_thumb_colors(COLORREF out, COLORREF in, COLORREF highlight) { m_thumb_color = out; m_thumb_on_color = in; m_thumb_color = highlight; init_gdi_objs(); }//设置通道颜色void set_channel_colors(COLORREF bk, COLORREF left) { m_channel_bk_color = bk; m_channel_left_color = left;  init_gdi_objs();}private://初始化gdi对象void init_gdi_objs();//删除dig对象void delete_gdi_objs();void owner_draw(CDC *pDc);void get_ellipse_rect(CRect &rect);private:COLORREF  m_dlg_bk_color;COLORREF  m_channel_bk_color;COLORREF  m_channel_left_color;COLORREFm_thumb_color;COLORREFm_thumb_on_color;COLORREFm_thumb_selected_color;float m_thumb_rate;BOOL thumb_down;BOOL thumb_selected;CPen pen_thumb_selected;CPen pen_thumb;CPen pen_thumb_on;CBrush brush_thumb_selected;CBrush brush_thumb;CBrush brush_thumb_on;};

redraw_slider.cpp:

#include "redraw_slider.h"#define SLIDER_BK_COLOR RGB(185,185,185)#define SLIDER_LEFT_COLOR RGB(246, 179, 127)#define SLIDER_THUMB_COLOR RGB(105,105,105)#define SLIDER_THUMB_ON_COLOR RGB(255,102,0)#define SLIDER_THUMB_SELECTED_COLOR  RGB(210,105,30)#define DLG_BK_COLOR RGB(213, 231, 241)redraw_slider::redraw_slider(){m_dlg_bk_color = COLORREF(DLG_BK_COLOR);m_channel_bk_color = COLORREF(SLIDER_BK_COLOR);m_channel_left_color = COLORREF(SLIDER_LEFT_COLOR);m_thumb_color = COLORREF(SLIDER_THUMB_COLOR);m_thumb_on_color = COLORREF(SLIDER_THUMB_ON_COLOR);m_thumb_selected_color = COLORREF(SLIDER_THUMB_SELECTED_COLOR);m_thumb_rate = (float)0.8;thumb_down = false;thumb_selected = false;init_gdi_objs();}void redraw_slider::init_gdi_objs(){pen_thumb_selected.CreatePen(PS_DASHDOTDOT, 2, m_thumb_selected_color);pen_thumb.CreatePen(PS_DASHDOTDOT, 2, m_thumb_color);pen_thumb_on.CreatePen(PS_DASHDOTDOT, 2, m_thumb_on_color);brush_thumb_selected.CreateSolidBrush(m_thumb_selected_color);brush_thumb.CreateSolidBrush(m_thumb_color);brush_thumb_on.CreateSolidBrush(m_thumb_on_color);}void redraw_slider::delete_gdi_objs(){DeleteObject(pen_thumb_selected);DeleteObject(pen_thumb);DeleteObject(pen_thumb_on);DeleteObject(brush_thumb_selected);DeleteObject(brush_thumb);DeleteObject(brush_thumb_on);}BEGIN_MESSAGE_MAP(redraw_slider, CSliderCtrl)ON_WM_PAINT()ON_WM_LBUTTONDOWN()ON_WM_LBUTTONUP()ON_WM_MOUSEMOVE()END_MESSAGE_MAP()void redraw_slider::OnPaint(){CSliderCtrl::OnPaint();CDC *pDc = GetDC();owner_draw(pDc);ReleaseDC(pDc);}void redraw_slider::owner_draw(CDC *pDc){//区域获取CRect clientRect;GetClientRect(clientRect);CRect channelRect;GetChannelRect(&channelRect);CRect thumbRect;GetThumbRect(thumbRect);//绘制底色pDc->SetBkMode(TRANSPARENT);pDc->FillSolidRect(clientRect, m_dlg_bk_color);pDc->FillSolidRect(channelRect, m_channel_bk_color);pDc->Draw3dRect(channelRect, m_channel_bk_color, m_channel_bk_color);//绘制进度CRect leftRect;leftRect.left = channelRect.left;leftRect.top = channelRect.top;leftRect.bottom = channelRect.bottom;leftRect.right = thumbRect.left;pDc->FillSolidRect(leftRect, m_channel_left_color);pDc->Draw3dRect(leftRect, m_channel_left_color, m_channel_left_color);//绘制滑块CPen * oldpen;CBrush *oldbrush;if (thumb_down){oldpen = pDc->SelectObject(&pen_thumb_selected);oldbrush = pDc->SelectObject(&brush_thumb_selected);}else  if(!thumb_down && thumb_selected){oldpen =  pDc->SelectObject(&pen_thumb_on);oldbrush = pDc->SelectObject(&brush_thumb_on);}else{oldpen = pDc->SelectObject(&pen_thumb);oldbrush = pDc->SelectObject(&brush_thumb);}get_ellipse_rect(thumbRect);pDc->Ellipse(thumbRect);pDc->SelectObject(oldpen);pDc->SelectObject(oldbrush);}void redraw_slider::get_ellipse_rect(CRect &rect){CPoint center = rect.CenterPoint();int length = 0;rect.Width() < rect.Height() ? length = (int)(rect.Height()*m_thumb_rate) : length = (int)(rect.Width()*m_thumb_rate);rect.left = center.x - length / 2;rect.right = center.x + length / 2;rect.top = center.y - length / 2;rect.bottom = center.y + length / 2;}void redraw_slider::OnLButtonDown(UINT nFlags, CPoint point){CRect thumbRect;GetThumbRect(thumbRect);get_ellipse_rect(thumbRect);if (thumbRect.PtInRect(point) && !thumb_down){thumb_down = TRUE;InvalidateRect(thumbRect);}CSliderCtrl::OnLButtonDown(nFlags, point);}void redraw_slider::OnLButtonUp(UINT nFlags, CPoint point){thumb_down = FALSE;CSliderCtrl::OnLButtonUp(nFlags, point);}void redraw_slider::OnMouseMove(UINT nFlags, CPoint point){CRect thumbRect;GetThumbRect(thumbRect);get_ellipse_rect(thumbRect);BOOL inrect = thumbRect.PtInRect(point);if (inrect != thumb_selected){thumb_selected = inrect;InvalidateRect(thumbRect);}CSliderCtrl::OnMouseMove(nFlags, point);}