Qt第三方圆形进度条-及其改进
2024-08-25 23:42:01
Qt第三方圆形进度条的改进
要实现一个圆形的进度条功能，在网上找到一个比较出名的第三方封装类：QRoundProgressBar，地址：sourceforge 的 QRoundProgressBar
功能封装的还是不错，提供了3种模式，线形、圆环、饼状。使用过程中发现圆环进度条对背景透明支持不够完善，内圆的背景无法实现透明，为了解决此问题，下面对此控件进行了一些修订，实现完整的圆形进度条。
QRoundProgressBar目前存在的不足
QRoundProgressBar在带背景图片widget下使用StyleDonut样式时，内环背景无法透明
代码如下：
头文件:
class DRoundProgressBar;
class QTimer;
namespace Ui {
class Widget;
}
class Widget : public QWidget
{
Q_OBJECT
public:
explicit Widget(QWidget *parent = 0);
~Widget();
public slots:
void onTimeOut();
private:
Ui::Widget *ui;
QTimer* mTimer;
DRoundProgressBar* mRoundBar;
int mPresent;
};cpp:
#include "Widget.h"
#include "ui_Widget.h"
#include "DRoundProgressBar.h"
#include <QTimer>
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
setAutoFillBackground(true);
QPixmap img(":/img/BlueDialog_BK.png");
QPalette bkPalette;
bkPalette.setBrush(QPalette::Window,QBrush(img));
setPalette(bkPalette);
mRoundBar = new DRoundProgressBar(this);
mRoundBar->setGeometry(150,100,500,500);
mRoundBar->setBarStyle(DRoundProgressBar::StyleDonut);
mRoundBar->setRange(0,100);
QPalette palette;
palette.setBrush(QPalette::Window,Qt::NoBrush);
palette.setBrush(QPalette::AlternateBase,Qt::NoBrush);
palette.setBrush(QPalette::Highlight,QBrush(QColor(0,140,255)));
palette.setColor(QPalette::Text,QColor(0,0,0));
//palette.setBrush(QPalette::Base,Qt::white);
mRoundBar->setPalette(palette);
mTimer = new QTimer(this);
mTimer->setInterval(200);
connect(mTimer,SIGNAL(timeout()),this,SLOT(onTimeOut()));
mPresent = 0;
mTimer->start();
}
Widget::~Widget()
{
delete ui;
}
void Widget::onTimeOut()
{
++mPresent;
if(mPresent >= 100)
{
mPresent = 0;
}
mRoundBar->setValue(mPresent);
}这里把QPalette::Window和QPalette::AlternateBase设置为透明，发现无法绘制圆环
原因
查看代码，看看其绘制圆环的步骤
void QRoundProgressBar::drawValue(QPainter &p, const QRectF &baseRect, double value, double arcLength)
{
// nothing to draw
if (value == m_min)
return;
// for Line style
if (m_barStyle == StyleLine)
{
p.setPen(QPen(palette().highlight().color(), m_dataPenWidth));
p.setBrush(Qt::NoBrush);
p.drawArc(baseRect.adjusted(m_outlinePenWidth/2, m_outlinePenWidth/2, -m_outlinePenWidth/2, -m_outlinePenWidth/2),
m_nullPosition * 16,
-arcLength * 16);
return;
}
// for Pie and Donut styles
QPainterPath dataPath;
dataPath.setFillRule(Qt::WindingFill);
// pie segment outer
dataPath.moveTo(baseRect.center());
dataPath.arcTo(baseRect, m_nullPosition, -arcLength);
dataPath.lineTo(baseRect.center());
p.setBrush(palette().highlight());
p.setPen(QPen(palette().shadow().color(), m_dataPenWidth));
p.drawPath(dataPath);
}发现绘制圆环和绘制pie是一个代码，而实现圆环只不过是用一个背景覆盖上去了，这样，如果让中间区域透明就会显示画的那个扇形的那一部分(原来作者是得多懒-_-#)。
因此。在绘制圆环时需要特殊对待，QPainterPath在画圆环时把圆环填充。
改进
这里需要把原来的drawValue函数进行修正，原来drawValue函数对绘制pie和绘制Donut styles是一样处理，这里修正为pie就画pie，画Donut styles就画圆环：
为了绘制圆环，drawValue函数需添加两个变量，是内环的对应的矩形和半径
virtual void drawValue(QPainter& p, const QRectF& baseRect, double value, double arcLength, const QRectF & innerRect, double innerRadius);改动后的cpp
void QRoundProgressBar::drawValue(QPainter &p
, const QRectF &baseRect
, double value
, double arcLength
, const QRectF & innerRect
, double innerRadius)
{
// nothing to draw
if (value == m_min)
return;
// for Line style
if (m_barStyle == StyleLine)
{
p.setPen(QPen(palette().highlight().color(), m_dataPenWidth));
p.setBrush(Qt::NoBrush);
p.drawArc(baseRect.adjusted(m_outlinePenWidth/2, m_outlinePenWidth/2, -m_outlinePenWidth/2, -m_outlinePenWidth/2),
m_nullPosition * 16,
-arcLength * 16);
return;
}
// for Pie and Donut styles
QPainterPath dataPath;
dataPath.setFillRule(Qt::WindingFill);
dataPath.moveTo(baseRect.center());
dataPath.arcTo(baseRect, m_nullPosition, -arcLength);//大家都是先绘制外圆的弧长
if(m_barStyle == StylePie)
{
// pie segment outer
dataPath.lineTo(baseRect.center());
p.setPen(QPen(palette().shadow().color(), m_dataPenWidth));
}
if(m_barStyle == StyleDonut)
{
// draw dount outer
QPointF currentPoint = dataPath.currentPosition();//绘制完外圆弧长后，获取绘制完的位置绘制一个直线到达内圆
currentPoint = baseRect.center() + ((currentPoint - baseRect.center()) * m_innerOuterRate;//计算内圆的坐标点，m_innerOuterRate替代了原作者写的0.75，代表内圆是外圆的0.75倍
dataPath.lineTo(currentPoint);//绘制外圆到内圆的直线
dataPath.moveTo(baseRect.center());//坐标点回到中心准备绘制内圆弧形
dataPath.arcTo(innerRect, m_nullPosition-arcLength, arcLength);//绘制内圆的弧形
currentPoint = dataPath.currentPosition();//准备绘制内圆到外圆的直线，形成封闭区域
currentPoint = baseRect.center() + ((currentPoint - baseRect.center()) * (2-m_innerOuterRate));//绘制内圆到外圆的直线，这里2-m_innerOuterRate其实是对应(1 + (1 -m_innerOuterRate))的
dataPath.lineTo(currentPoint);
p.setPen(Qt::NoPen);//这个很重要不然就会有绘制过程的一些轮廓了
}
p.setBrush(palette().highlight());
p.drawPath(dataPath);
}具体过程见代码的注释。
这里作者把内圆直径定死为外圆的0.75倍，我觉得这样失去了灵活性，因此加入了一个float变量，m_innerOuterRate，默认为0.75，替代原来的0.75常数，并加入方法float innerOuterRate() const和void setInnerOuterRate(float r)进行设置
原来的paintEvent函数的函数顺序也需要改变：
下面是原来的paintEvent函数：
void QRoundProgressBar::paintEvent(QPaintEvent* /*event*/)
{
double outerRadius = qMin(width(), height());
QRectF baseRect(1, 1, outerRadius-2, outerRadius-2);
QImage buffer(outerRadius, outerRadius, QImage::Format_ARGB32_Premultiplied);
QPainter p(&buffer);
p.setRenderHint(QPainter::Antialiasing);
// data brush
rebuildDataBrushIfNeeded();
// background
drawBackground(p, buffer.rect());
// base circle
drawBase(p, baseRect);
// data circle
double arcStep = 360.0 / (m_max - m_min) * m_value;
drawValue(p, baseRect, m_value, arcStep);
// center circle
double innerRadius(0);
QRectF innerRect;
calculateInnerRect(baseRect, outerRadius, innerRect, innerRadius);
drawInnerBackground(p, innerRect);
// text
drawText(p, innerRect, innerRadius, m_value);
// finally draw the bar
p.end();
QPainter painter(this);
painter.fillRect(baseRect, palette().background());
painter.drawImage(0,0, buffer);
}原来作者使用了QImage作为缓存，但qt自带双缓冲，这一步没有必要(用QImage时在ubuntu还有小问题，在控件比较小时(200*200以下)会出现花屏现象，原因未知),修改为：
void QRoundProgressBar::paintEvent(QPaintEvent* /*event*/)
{
double outerRadius = qMin(width(), height());
QRectF baseRect(1, 1, outerRadius-2, outerRadius-2);
QPainter p(this);
p.setRenderHint(QPainter::Antialiasing);
// data brush
rebuildDataBrushIfNeeded();
// background
drawBackground(p, rect());
double innerRadius(0);
QRectF innerRect;
calculateInnerRect(baseRect, outerRadius, innerRect, innerRadius);
double arcStep = 360.0 / (m_max - m_min) * m_value;
// base circle
drawBase(p, baseRect,innerRect);
// data circle
drawValue(p, baseRect, m_value, arcStep,innerRect, innerRadius);
// center circle
drawInnerBackground(p, innerRect);
// text
drawText(p, innerRect, innerRadius, m_value);
// finally draw the bar
p.end();
}主要是把calculateInnerRect(baseRect, outerRadius, innerRect, innerRadius);函数提前计算出内圆对应的参数。并传入给新修改的drawValue函数。把多余的双缓冲机制去掉.
此时效果还未达到需求的效果，发现drawBase函数还需要修改，原来的drawBase函数如下：
void QRoundProgressBar::drawBase(QPainter &p, const QRectF &baseRect)
{
switch (m_barStyle)
{
case StyleDonut:
p.setPen(QPen(palette().shadow().color(), m_outlinePenWidth));
p.setBrush(palette().base());
p.drawEllipse(baseRect);
break;
case StylePie:
p.setPen(QPen(palette().base().color(), m_outlinePenWidth));
p.setBrush(palette().base());
p.drawEllipse(baseRect);
break;
case StyleLine:
p.setPen(QPen(palette().base().color(), m_outlinePenWidth));
p.setBrush(Qt::NoBrush);
p.drawEllipse(baseRect.adjusted(m_outlinePenWidth/2, m_outlinePenWidth/2, -m_outlinePenWidth/2, -m_outlinePenWidth/2));
break;
default:;
}
}上面的drawBase函数可见，由于原作者比较懒，对于Donut styles模式就直接画了一个外圆，并不是一个空心圆环，改进如下：
void QRoundProgressBar::drawBase(QPainter &p, const QRectF &baseRect,const QRectF &innerRect)
{
switch (m_barStyle)
{
case StyleDonut:
{
QPainterPath dataPath;
dataPath.setFillRule(Qt::OddEvenFill);
dataPath.moveTo(baseRect.center());
dataPath.addEllipse(baseRect);
dataPath.addEllipse(innerRect);
p.setPen(QPen(palette().shadow().color(), m_outlinePenWidth));
p.setBrush(palette().base());
p.drawPath(dataPath);
break;
}
case StylePie:
p.setPen(QPen(palette().base().color(), m_outlinePenWidth));
p.setBrush(palette().base());
p.drawEllipse(baseRect);
break;
case StyleLine:
p.setPen(QPen(palette().base().color(), m_outlinePenWidth));
p.setBrush(Qt::NoBrush);
p.drawEllipse(baseRect.adjusted(m_outlinePenWidth/2, m_outlinePenWidth/2, -m_outlinePenWidth/2, -m_outlinePenWidth/2));
break;
default:;
}
}最后运行效果：
代码见:czyt1988的github
http://blog.csdn.net/czyt1988/article/details/53422274
最新文章
- Android系统默认对话框添加图片
- POJ 1753. Flip Game 枚举or爆搜+位压缩，或者高斯消元法
- Hibernate criteria 增加排序项
- zookeeper选举原理
- funny_python 00 The Zen of Python
- Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.解决办法
- C#小知识特殊的DefaultValueAttribute
- HDU1297 Children’s Queue (高精度+递推)
- ural 1217. Unlucky Tickets
- 使用 Dalvik 调试监控服务 (DDMS) 工具
- Linux 卸载Oracle 11G
- Centos7下安装netstat
- iOS自学之NSOperation、NSOperationQueue、Background
- 对es6中Promise和async的理解
- 网站开发中使用javascript获取浏览器滚动条宽度
- Linux服务器SSH免密互访
- mapReducer第一个例子WordCount
- madlib centos yum 包安装
- JAVA程序员常用英语
- unity3d 读取usb摄像头