QT版本：win32 QT Creator5.9.9

在QT中只有横条状的进度条，目前需要使用圆形状进度条显示进度，只能自己设计一个，可以显示圆弧、圆圈和中心文本。

设计思路：

①设计一个QWidget部件类。

提供圆圈的半径属性，根据该属性把该部件初始化为一个长宽相等的正方形部件。

②重载painterEvent()事件。

③在painterEvent事件中定义一个画家、画笔、字体对象，使用drawArc接口绘制圆弧和drawText接口绘制中心文本，最后更新部件。

a、设计时提供画笔、文本类的设置接口，用于设置圆圈和字体的模样，绘制圆时占满窗体，绘制圆弧时要根据圆的路径宽度重新获取半径，防止超出窗体；框定文本的位置，固定范围和居中显示；drawArc方法绘制的圆存在诸多毛刺，需要更改渲染模式。

b、drawArc方法默认是从3点钟方向呈逆时针绘制的，要设计方法固定为0点钟起始，进度方向可调。

④针对上一步为整个工程提供设置接口。

⑤在使用时，与QTimeLine类时间轴结合使用，可以达到动态显示的结果。

待优化：

添加进度条背景

进度条颜色渐变

饼状显示

实验结果：

在使用时可以更改颜色和形状大小，边线大小和文本样式；把该部件动作子部件时，标题框不存在，且背景色为透明色。

代码实现：

arcPainter.h:

1 #ifndef ARCPAINT_H2 #define ARCPAINT_H

3

4 #include

5 #include

6 #include

7 #include

8 #include

9 #include

10 #include

11 #include

12 #include

13 #include

14 #include

15 #include

16

17 class ArcPaint : publicQWidget18 {19 Q_OBJECT20 public:21 enum Direction {clockwise = -1, anticlockwise = 1};22 ArcPaint(QWidget *parent =nullptr);23 ~ArcPaint();24 void setRadius(int val); //设置半径25 //设置文本

26 void setCenterText(const QString &str); //字符串

27 void setCenterText(int val, const QString &catStr = NULL); //数字

28 void setCenterText(double val, const QString &catStr = NULL, int precision = 2);29 //设置弧线

30 void setArcAngle(int angle, Direction direction =clockwise); // 默认方向逆时针31 //获取画家相关参数

32 QPen *getPen();33 QFont *getFont();34 protected:35 void paintEvent(QPaintEvent *event); //重载绘画事件

36

37 private:38 double percent; //进度百分比，与current相互影响

39 int radius; //半径大小

40 intarcRangle;41 QPen *arcPen;42 QFont *font;43 QPainter *painter;44 QString text;45 };46 #endif //ARCPAINT_H

arcPainter.cpp:

1 #include "arcpaint.h"

2

3 ArcPaint::ArcPaint(QWidget *parent)4 : QWidget(parent)5 {6 radius = 100;7 arcRangle = 180;8 this->resize(radius*2, radius*2);9 painter = newQPainter();10

11 arcPen = newQPen;12 arcPen->setColor(Qt::blue);13 arcPen->setStyle(Qt::SolidLine);14 arcPen->setCapStyle(Qt::RoundCap);15 arcPen->setJoinStyle(Qt::RoundJoin);16

17 arcPen->setWidthF(10.0);18

19 font = newQFont();20 font->setPixelSize(30);21

22 text = "H";23 }24

25 ArcPaint::~ArcPaint()26 {27 delete font;28 delete arcPen;29 delete painter;30 }31

32 void ArcPaint::setRadius(intval)33 {34 radius =val;35 this->resize(radius*2, radius*2);36 }37 void ArcPaint::setCenterText(const QString &str)38 {39 text =str;40 }41

42 void ArcPaint::setCenterText(int val, const QString &catStr)43 {44 text = text.setNum(val) +catStr;45 }46

47 void ArcPaint::setCenterText(double val, const QString &catStr, intprecision)48 {49 text = text.setNum(val, 'f', precision) +catStr;50 }51

52 void ArcPaint::setArcAngle(intangle, Direction direction)53 {54 arcRangle = angle *direction;55 }56

57 void ArcPaint::paintEvent(QPaintEvent *event)58 {59 painter->begin(this);60 //设置渲染模式

61 painter->setRenderHint(QPainter::HighQualityAntialiasing, true);62 //设置画笔

63 painter->setPen(*arcPen);64 //设置文本格式

65 painter->setFont(*font);66 //设置文本显示范围

67 QRect textRect(0,0,this->width(), this->height());68 //绘制文本，在范围内居中显示

69 painter->drawText(textRect, Qt::AlignCenter, text);70

71 int penW = arcPen->width();72 //绘制圆弧

73 painter->drawArc((penW)/2,penW/2,radius*2-penW,radius*2-penW,90*16,arcRangle*16);74

75 painter->end();76 this->update();77 }78

79 QPen *ArcPaint::getPen()80 {81 returnarcPen;82 }83

84 QFont *ArcPaint::getFont()85 {86 returnfont;87 }

main.cpp:

1 #include "arcpaint.h"

2

3 #include

4

5 int main(int argc, char *argv[])6 {7 QApplication a(argc, argv);8 ArcPaint w;9 w.setArcAngle(60, ArcPaint::anticlockwise);10 w.setCenterText(60, "°");11 w.show();12 returna.exec();13 }