简单封装的一个彩色进度条【原创】

//=========================================================
//
// Copyright (c) 2000-2004  iWise Technologies,Co. Ltd.
// All Rights Reserved.
//
// Product: iW988
// File: GradientProgressCtrl.h
// Created: 天衣有缝
//  
// Description:2004.12.28 20:12:00
//     ValueAdded main program for iW988.
//                   Contact:
//                       waterpub@mail.csdn.net
//
//=========================================================
#pragma once 

class CGradientProgressCtrl : public CProgressCtrl
{
public:
	CGradientProgressCtrl()					;	// 构造
	virtual ~CGradientProgressCtrl()			;	// 析构

	int  SetPos(int nPos)					;	// 设置位置
	int  SetStep(int nStep)					;	// 设置步进值
	void SetRange(int nLower, int nUpper)			;	// 设置范围
	int  SetText(const char * pText, BOOL bRepaint = TRUE)	;	// 设置显示文字

public:
	void ShowPercent(BOOL bShowPercent = TRUE)	{ m_bShowPercent = bShowPercent; }	    // 显示百分比
	void ShowText(BOOL bShowText = TRUE)		{ m_bShowText = bShowText; }    // 显示文字

public:
	COLORREF GetTextColor(void)	{ return m_clrText	; }		// 取得字体颜色
	COLORREF GetBkColor(void)		{ return m_clrBkGround	; }	// 取得背景颜色
	COLORREF GetStartColor(void)	{ return m_clrStart	; }		// 取得开始颜色
	COLORREF GetEndColor(void)		{ return m_clrEnd		; }	// 取得结束颜色
	void SetStartColor(COLORREF color)	{ m_clrStart	= color ; }		// 设置字体颜色
	void SetEndColor(COLORREF color)	{ m_clrEnd	= color ; }		// 设置背景颜色
	void SetTextColor(COLORREF color)	{ m_clrText	= color ; }		// 设置开始颜色
	void SetBkColor(COLORREF color)						        // 设置结束颜色
	{
		m_clrBkGround = color ;
		m_BKGroundBrush.DeleteObject();
		m_BKGroundBrush.CreateSolidBrush(m_clrBkGround);
	}

private:
	void Draw(CPaintDC* pDC, const RECT& rectClient, const int& nMaxWidth);
	afx_msg void OnPaint();
	DECLARE_MESSAGE_MAP()

private:
	// 变量定义
	int			m_nLower			;	// 最小值
	int			m_nUpper			;	// 最大值
	int			m_nStep			        ;	// 步进值
	int			m_nCurPos			;	// 当前值
	COLORREF m_clrStart		        ;	// 起始颜色
	COLORREF	m_clrEnd		;	// 结束颜色
	COLORREF	m_clrBkGround		;	// 背景颜色
	COLORREF	m_clrText		;	// 文本颜色
	BOOL		m_bShowPercent		;	// 显示百分比
	BOOL		m_bShowText		;	// 显示文字

	char		m_Text[32]		;	// 文字:如显示拷贝速度
	char		m_Percent[4]		;	// 文字:百分比

	CBrush		m_BKGroundBrush		;	// 背景刷子
	CBrush		m_TempBrush		;        // 临时刷子

private:
	// 内嵌类
	class CMemDC : public CDC			// 内存设备环境
	{
	public:
		CMemDC(CDC* pDC):CDC()
		{
			ASSERT(pDC != NULL);

			m_pDC = pDC;
			m_pOldBitmap = NULL;
			m_bMemDC = !pDC->IsPrinting();
			// 图形设备还是打印机设备
			if (m_bMemDC)
			{
				pDC->GetClipBox(&m_rect);
				CreateCompatibleDC(pDC);
				m_bitmap.CreateCompatibleBitmap(pDC, m_rect.Width(), m_rect.Height());
				m_pOldBitmap = SelectObject(&m_bitmap);
				SetWindowOrg(m_rect.left, m_rect.top);
			}
			else	//为相关的现有设备准备打印
			{
				m_bPrinting = pDC->m_bPrinting;
				m_hDC = pDC->m_hDC;
				m_hAttribDC = pDC->m_hAttribDC;
			}
		}
		virtual ~CMemDC()
		{
			if (m_bMemDC)
			{
				m_pDC->BitBlt(m_rect.left, 
					     m_rect.top, 
					     m_rect.Width(),
					     m_rect.Height(), 
					     this, 
					     m_rect.left, 
					     m_rect.top,
					     SRCCOPY
					     );
				SelectObject(m_pOldBitmap);
			}
			else
			{
				m_hDC = m_hAttribDC = NULL;
			}
		}
		CMemDC* operator->()
		{
			return this;
		}
		operator CMemDC*()
		{
			return this;
		}
	private:
		CBitmap m_bitmap;
		CBitmap* m_pOldBitmap;  		//
		CDC* m_pDC; 			        //
		CRect m_rect;   			//
		BOOL m_bMemDC;  			//
	};

};
//=========================================================
//
// Copyright (c) 2000-2004  iWise Technologies,Co. Ltd.
// All Rights Reserved.
//
// Product: iW988
// File: GradientProgressCtrl.cpp
// Created: 天衣有缝
//  
// Description:
//     ValueAdded main program for iW988.
//                   Contact:
//                       waterpub@mail.csdn.net
//
//=========================================================
#include "stdafx.h" 
#include "GradientProgressCtrl.h" 

CGradientProgressCtrl::CGradientProgressCtrl()
{
	// 控件初始化
	m_nLower	        = 0		;
	m_nUpper	        = 100	        ;
	m_nCurPos	        = 0		;
	m_nStep                 = 1		;

	// 初始化显示颜色
	m_clrStart	= COLORREF(RGB(255, 0, 0))		;
	m_clrEnd		= COLORREF(RGB(0, 0, 255))	;
	m_clrBkGround	= ::GetSysColor(COLOR_3DFACE)	        ;
	m_clrText		= COLORREF(RGB(255, 255, 255))	;

	// 显示百分比,文字
	m_bShowPercent	= TRUE ;
	m_bShowText	= TRUE ;

	m_BKGroundBrush.CreateSolidBrush(m_clrBkGround)	;
	memset(m_Text, 0, 32);
}

CGradientProgressCtrl::~CGradientProgressCtrl()
{
	m_BKGroundBrush.DeleteObject();
}

BEGIN_MESSAGE_MAP(CGradientProgressCtrl, CProgressCtrl)
	ON_WM_PAINT()
END_MESSAGE_MAP()

/
// CGradientProgressCtrl 消息处理程序

void CGradientProgressCtrl::SetRange(int nLower, int nUpper)
{
	// 设置进度条的范围
	m_nLower	= nLower ;
	m_nUpper	= nUpper ;
	m_nCurPos	= nLower ;

	CProgressCtrl::SetRange(nLower, nUpper);
	CProgressCtrl::SetPos(nLower);
}

int CGradientProgressCtrl::SetStep(int nStep)
{
	// 设置步进值
	m_nStep = nStep;
	return (CProgressCtrl::SetStep(nStep));
}

int CGradientProgressCtrl::SetPos(int nPos)
{
	// 设置进度条位置
	m_nCurPos = nPos;
	return (CProgressCtrl::SetPos(nPos));
}

int CGradientProgressCtrl::SetText(const char * pText, BOOL bRepaint)
{
	// 显示的文字
	strcpy(m_Text, pText);
	if (bRepaint && m_bShowText)
	{
		Invalidate(TRUE);
	}

	return 0;
}

void CGradientProgressCtrl::OnPaint()
{
	CPaintDC dc(this); // 设备环境

	// TODO: 重画进度条
	RECT rectClient;
	GetClientRect(&rectClient);

	if (m_nCurPos <= m_nLower || m_nCurPos > m_nUpper)
	{
		// 不在范围之内直接以背景色填充
		dc.FillRect(&rectClient, &m_BKGroundBrush);
		return;
	}

	// 绘制进度条本身
	float maxWidth((float) m_nCurPos /(float) m_nUpper*(float) rectClient.right);
	Draw(&dc, rectClient, (int) maxWidth);

	// 文字显示
	dc.SetTextColor(m_clrText);
	dc.SetBkMode(TRANSPARENT);
	HGDIOBJ hOldFont = ::SelectObject(dc.m_hDC, ::GetStockObject(DEFAULT_GUI_FONT));
	if (m_bShowPercent)
	{
		// 显示进程条百分比
		sprintf(m_Percent, "%d%% ",(int) (100 * (float) m_nCurPos / m_nUpper));
		dc.DrawText(m_Percent, &rectClient, DT_VCENTER | DT_CENTER | DT_SINGLELINE);
	}
	if (m_bShowText)
	{
		// 显示进程条文字
		rectClient.left = (rectClient.left + rectClient.right) / 2;
		dc.DrawText(m_Text, &rectClient, DT_VCENTER | DT_CENTER | DT_SINGLELINE);
	}
	::SelectObject(dc.m_hDC, hOldFont);

	// 不要调用 CProgressCtrl::OnPaint()
}

void CGradientProgressCtrl::Draw(CPaintDC* pDC, const RECT& rectClient, const int& nMaxWidth)
{
	RECT rectFill;			//显示区域
	float fStep;			//每一步的幅宽
	CMemDC memDC(pDC);	

	int r, g, b;
	float rStep, gStep, bStep;
	//得到不同颜色并相减,返回颜色之间的最大差值
	r = (GetRValue(m_clrEnd) - GetRValue(m_clrStart));
	g = (GetGValue(m_clrEnd) - GetGValue(m_clrStart));
	b = (GetBValue(m_clrEnd) - GetBValue(m_clrStart));
	//使进程条显示的总数 等于最大的颜色差值
	int nSteps = max(abs(r), max(abs(g), abs(b)));
	//确定每一颜色填充多大的矩形区域
	fStep = (float) rectClient.right / (float) nSteps;
	//设置每一颜色填充的步数
	rStep = r / (float) nSteps;
	gStep = g / (float) nSteps;
	bStep = b / (float) nSteps;

	r = GetRValue(m_clrStart);
	g = GetGValue(m_clrStart);
	b = GetBValue(m_clrStart);
	//绘制颜色渐变的进程条
	for (int iOnBand = 0; iOnBand < nSteps; iOnBand++)
	{
		::SetRect(&rectFill, (int) (iOnBand * fStep), 0,// 填充矩形区域的左上角x,y和右下角x,y
			(int) ((iOnBand + 1) * fStep), rectClient.bottom + 1);

		VERIFY(m_TempBrush.CreateSolidBrush(RGB(r + rStep * iOnBand,
										g + gStep * iOnBand,
										b + bStep * iOnBand)));
		memDC.FillRect(&rectFill, &m_TempBrush);
		VERIFY(m_TempBrush.DeleteObject());
		//在结束绘制之前,使用背景色填充乘下的的客户区域
		if (rectFill.right > nMaxWidth)
		{
			::SetRect(&rectFill, rectFill.right, 0, rectClient.right,
				rectClient.bottom);
			VERIFY(m_TempBrush.CreateSolidBrush(m_clrBkGround));
			memDC.FillRect(&rectFill, &m_TempBrush);
			VERIFY(m_TempBrush.DeleteObject());
			return;
		}
	}
}
 
可以使用Vue组件的方式来封装一个进度条,具体实现如下: ```html <template> <div class="progress-bar"> <div class="progress" :style="{ width: percentage + '%' }"></div> </div> </template> <script> export default { name: 'ProgressBar', props: { percentage: { type: Number, required: true, default: 0 } } } </script> <style> .progress-bar { width: 100%; height: 10px; background-color: #e0e0e0; border-radius: 5px; overflow: hidden; } .progress { height: 100%; background-color: #4caf50; transition: width 0.3s ease-in-out; } </style> ``` 在上述代码中,我们定义了一个名为`ProgressBar`的Vue组件,其中包含一个`percentage`属性,表示进度条的进度百分比。该组件使用CSS样式实现进度条的效果,具体实现如下: - `.progress-bar`:表示进度条的外层容器,包含背景色和边框样式。 - `.progress`:表示进度条的进度部分,包含进度条颜色和过渡效果。 在组件的模板中,我们使用`percentage`属性来计算进度条的宽度,并将其绑定到`.progress`样式的`width`属性上。这样,当`percentage`值发生变化时,进度条的宽度也会发生相应的变化。 使用该进度条组件的方式如下: ```html <template> <div> <progress-bar :percentage="progress"></progress-bar> <button @click="increaseProgress">增加进度</button> </div> </template> <script> import ProgressBar from './ProgressBar.vue' export default { name: 'App', components: { ProgressBar }, data() { return { progress: 50 } }, methods: { increaseProgress() { this.progress += 10 } } } </script> ``` 在上述代码中,我们在父组件中引入了`ProgressBar`组件,并将`progress`属性绑定到子组件的`percentage`属性上。同时,在父组件中定义了一个按钮,点击按钮可以增加进度条的进度。 这样,我们就可以通过Vue组件来封装一个进度条,并在其他组件中方便地重复使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值