QT：圓形進度條設計

QT版本：win32 QT Creator5.9.9

在QT中只有橫條狀的進度條，目前需要使用圓形狀進度條顯示進度，只能自己設計一個，可以顯示圓弧、圓圈和中心文本。

設計思路：

①設計一個QWidget部件類。

提供圓圈的半徑屬性，根據該屬性把該部件初始化為一個長寬相等的正方形部件。

②重載painterEvent()事件。

③在painterEvent事件中定義一個畫家、畫筆、字體對象，使用drawArc接口繪制圓弧和drawText接口繪制中心文本，最后更新部件。

a、設計時提供畫筆、文本類的設置接口，用於設置圓圈和字體的模樣，繪制圓時占滿窗體，繪制圓弧時要根據圓的路徑寬度重新獲取半徑，防止超出窗體；框定文本的位置，固定范圍和居中顯示；drawArc方法繪制的圓存在諸多毛刺，需要更改渲染模式。

b、drawArc方法默認是從3點鍾方向呈逆時針繪制的，要設計方法固定為0點鍾起始，進度方向可調。

④針對上一步為整個工程提供設置接口。

⑤在使用時，與QTimeLine類時間軸結合使用，可以達到動態顯示的結果。

待優化：

　　添加進度條背景

　　進度條顏色漸變

　　餅狀顯示

實驗結果：

 

在使用時可以更改顏色和形狀大小，邊線大小和文本樣式；把該部件動作子部件時，標題框不存在，且背景色為透明色。

代碼實現：

arcPainter.h:

#ifndef ARCPAINT_H
#define ARCPAINT_H

#include <QWidget>
#include <QPen>
#include <QPainter>
#include <QDebug>
#include <QLabel>
#include <QLayout>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QFont>
#include <QTimeLine>
#include <QMouseEvent>
#include <QTimerEvent>

class ArcPaint : public QWidget
{
    Q_OBJECT
public:
    enum Direction {clockwise = -1, anticlockwise = 1};
    ArcPaint(QWidget *parent = nullptr);
    ~ArcPaint();
    void setRadius(int val); //設置半徑
    //設置文本
    void setCenterText(const QString &str); // 字符串
    void setCenterText(int val, const QString &catStr = NULL); // 數字
    void setCenterText(double val, const QString &catStr = NULL, int precision = 2);
    // 設置弧線
    void setArcAngle(int angle, Direction direction = clockwise); // 默認方向逆時針
    // 獲取畫家相關參數
    QPen * getPen();
    QFont * getFont();
protected:
    void paintEvent(QPaintEvent *event); // 重載繪畫事件

private:
    double percent;    // 進度百分比，與current相互影響
    int radius;        // 半徑大小
    int arcRangle;
    QPen * arcPen;
    QFont * font;
    QPainter * painter;
    QString text;
};
#endif // ARCPAINT_H

arcPainter.cpp:

#include "arcpaint.h"

ArcPaint::ArcPaint(QWidget *parent)
    : QWidget(parent)
{
    radius = 100;
    arcRangle = 180;
    this->resize(radius*2, radius*2);
    painter = new QPainter();

    arcPen = new QPen;
    arcPen->setColor(Qt::blue);
    arcPen->setStyle(Qt::SolidLine);
    arcPen->setCapStyle(Qt::RoundCap);
    arcPen->setJoinStyle(Qt::RoundJoin);

    arcPen->setWidthF(10.0);

    font = new QFont();
    font->setPixelSize(30);

    text = "H";
}

ArcPaint::~ArcPaint()
{
    delete font;
    delete arcPen;
    delete painter;
}

void ArcPaint::setRadius(int val)
{
    radius = val;
    this->resize(radius*2, radius*2);
}
void ArcPaint::setCenterText(const QString &str)
{
    text = str;
}

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

void ArcPaint::setCenterText(double val, const QString &catStr, int precision)
{
    text = text.setNum(val, 'f', precision) + catStr;
}

void ArcPaint::setArcAngle(int angle, Direction direction)
{
    arcRangle = angle * direction;
}

void ArcPaint::paintEvent(QPaintEvent *event)
{
    painter->begin(this);
    // 設置渲染模式
    painter->setRenderHint(QPainter::HighQualityAntialiasing, true);
    // 設置畫筆
    painter->setPen(*arcPen);
    // 設置文本格式
    painter->setFont(*font);
    // 設置文本顯示范圍
    QRect textRect(0,0,this->width(), this->height());
    // 繪制文本，在范圍內居中顯示
    painter->drawText(textRect, Qt::AlignCenter, text);

    int penW = arcPen->width();
    // 繪制圓弧
    painter->drawArc((penW)/2,penW/2,radius*2-penW,radius*2-penW,90*16,arcRangle*16);

    painter->end();
    this->update();
}

QPen *ArcPaint::getPen()
{
    return arcPen;
}

QFont *ArcPaint::getFont()
{
    return font;
}

main.cpp:

#include "arcpaint.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    ArcPaint w;
    w.setArcAngle(60, ArcPaint::anticlockwise);
    w.setCenterText(60, "°");
    w.show();
    return a.exec();
}