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

原理:

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

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

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

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

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

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

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

说明:

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

效果一：正常播放状态

效果二：选中状态

效果三：拖动状态

绘制时绘制顺序:

1、绘制控件底色

2、绘制通道背景色

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

4、绘制滑块色

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

代码如下:

#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;
	COLORREF	m_thumb_color;
	COLORREF	m_thumb_on_color;
	COLORREF	m_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;
};

#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);
}