Qt編寫自定義控件14-環形進度條

一、前言

環形進度條，用來展示目前進度，為了滿足大屏UI的需要特意定制，以前有個叫圓環進度條，不能滿足項目需要，隻能重新定做，以前的進度間距不能自适應分辨率，而且目前進度對應的反的進度不能單獨設定顔色，即目前進度90%，剩餘的10%也需要設定成不同的顔色，還有一個重要的功能是，能夠指定多個警戒值，一旦超過或者小于該值，則目前進度自動切換到預先設定的警戒值顔色，而不需要使用者自己去判斷警戒值去設定警戒顔色，使用者隻需要傳入目前值即可，這個功能非常實用，還可以設定警戒判斷的标準是超過值還是小于值報警。個人感覺這個環形進度條功能完爆市面上所有的圓環進度條。隻要稍作參數設定可以變成各種想要的效果，什麼起始角度+動畫效果+順時針逆時針轉等。

二、實作的功能

1:可設定範圍值,支援負數值
2:可設定精确度,最大支援小數點後3位
3:可設定起始角度
4:可設定三種值+三種顔色,啟用自動檢測值後繪制不同的顔色
5:可設定是否啟用動畫效果以及動畫效果每次移動的步長
6:可設定背景顔色/文字顔色/進度顔色/中間圓顔色
7:可設定值警戒報警比較模式 0-不比較 1-最大值報警 2-最小值報警
8:可設定顯示的值是百分比
9:可設定圓環與背景之間的距離即間距
10:可設定圓環的寬度
11:可設定圓環背景顔色,形成兩種顔色差
12:可設定順時針逆時針轉
13:自适應窗體拉伸,刻度尺和文字自動縮放

三、效果圖

四、頭檔案代碼

#ifndef PROGRESSRING_H
#define PROGRESSRING_H

/**
 * 環形進度條控件 作者:feiyangqingyun(QQ:517216493) 2019-5-1
 * 1:可設定範圍值,支援負數值
 * 2:可設定精确度,最大支援小數點後3位
 * 3:可設定起始角度
 * 4:可設定三種值+三種顔色,啟用自動檢測值後繪制不同的顔色
 * 5:可設定是否啟用動畫效果以及動畫效果每次移動的步長
 * 6:可設定背景顔色/文字顔色/進度顔色/中間圓顔色
 * 7:可設定值警戒報警比較模式 0-不比較 1-最大值報警 2-最小值報警
 * 8:可設定顯示的值是百分比
 * 9:可設定圓環與背景之間的距離即間距
 * 10:可設定圓環的寬度
 * 11:可設定圓環背景顔色,形成兩種顔色差
 * 12:可設定順時針逆時針轉
 * 13:自适應窗體拉伸,刻度尺和文字自動縮放
 */

#include <QWidget>

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT ProgressRing : public QWidget
#else
class ProgressRing : public QWidget
#endif

{
    Q_OBJECT
    Q_PROPERTY(double minValue READ getMinValue WRITE setMinValue)
    Q_PROPERTY(double maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(double value READ getValue WRITE setValue)
    Q_PROPERTY(int precision READ getPrecision WRITE setPrecision)

    Q_PROPERTY(bool showPercent READ getShowPercent WRITE setShowPercent)
    Q_PROPERTY(int alarmMode READ getAlarmMode WRITE setAlarmMode)
    Q_PROPERTY(int startAngle READ getStartAngle WRITE setStartAngle)
    Q_PROPERTY(int ringPadding READ getRingPadding WRITE setRingPadding)
    Q_PROPERTY(int ringWidth READ getRingWidth WRITE setRingWidth)

    Q_PROPERTY(bool animation READ getAnimation WRITE setAnimation)
    Q_PROPERTY(double animationStep READ getAnimationStep WRITE setAnimationStep)

    Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
    Q_PROPERTY(QColor ringColor READ getRingColor WRITE setRingColor)
    Q_PROPERTY(QColor ringBgColor READ getRingBgColor WRITE setRingBgColor)
    Q_PROPERTY(QColor circleColor READ getCircleColor WRITE setCircleColor)

    Q_PROPERTY(int ringValue1 READ getRingValue1 WRITE setRingValue1)
    Q_PROPERTY(int ringValue2 READ getRingValue2 WRITE setRingValue2)
    Q_PROPERTY(int ringValue3 READ getRingValue3 WRITE setRingValue3)

    Q_PROPERTY(QColor ringColor1 READ getRingColor1 WRITE setRingColor1)
    Q_PROPERTY(QColor ringColor2 READ getRingColor2 WRITE setRingColor2)
    Q_PROPERTY(QColor ringColor3 READ getRingColor3 WRITE setRingColor3)

public:
    explicit ProgressRing(QWidget *parent = 0);
    ~ProgressRing();

protected:
    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawRing(QPainter *painter);
    void drawPadding(QPainter *painter);
    void drawCircle(QPainter *painter);
    void drawValue(QPainter *painter);

private slots:
    void updateValue();

private:
    double minValue;                //最小值
    double maxValue;                //最大值
    double value;                   //目标值
    int precision;                  //精确度,小數點後幾位

    bool clockWise;                 //順時針逆時針
    bool showPercent;               //顯示百分比
    int alarmMode;                  //警戒報警模式,進度為不同的顔色
    int startAngle;                 //起始角度
    int ringPadding;                //圓環間距
    int ringWidth;                  //圓環寬度

    bool animation;                 //是否啟用動畫顯示
    double animationStep;           //動畫顯示時步長

    QColor bgColor;                 //背景顔色
    QColor textColor;               //文字顔色
    QColor ringColor;               //圓環顔色
    QColor ringBgColor;             //圓環進度背景
    QColor circleColor;             //中心圓顔色

    int ringValue1;                 //環形值1
    int ringValue2;                 //環形值2
    int ringValue3;                 //環形值3

    QColor ringColor1;              //環形顔色1
    QColor ringColor2;              //環形顔色2
    QColor ringColor3;              //環形顔色3

    bool reverse;                   //是否往回走
    double currentValue;            //目前值
    QTimer *timer;                  //定時器繪制動畫

public:
    double getMinValue()            const;
    double getMaxValue()            const;
    double getValue()               const;
    int getPrecision()              const;

    bool getClockWise()             const;
    bool getShowPercent()           const;
    int getAlarmMode()              const;
    int getStartAngle()             const;
    int getRingPadding()            const;
    int getRingWidth()              const;

    bool getAnimation()             const;
    double getAnimationStep()       const;

    QColor getBgColor()             const;
    QColor getTextColor()           const;
    QColor getRingColor()           const;
    QColor getRingBgColor()         const;
    QColor getCircleColor()         const;

    int getRingValue1()             const;
    int getRingValue2()             const;
    int getRingValue3()             const;

    QColor getRingColor1()          const;
    QColor getRingColor2()          const;
    QColor getRingColor3()          const;

    QSize sizeHint()                const;
    QSize minimumSizeHint()         const;

public Q_SLOTS:
    //設定範圍值
    void setRange(double minValue, double maxValue);
    void setRange(int minValue, int maxValue);

    //設定最大最小值
    void setMinValue(double minValue);
    void setMaxValue(double maxValue);

    //設定目标值
    void setValue(double value);
    void setValue(int value);

    //設定精确度
    void setPrecision(int precision);

    //設定順時針逆時針轉
    void setClockWise(bool clockWise);
    //設定顯示百分比
    void setShowPercent(bool showPercent);
    //設定啟動自動檢驗
    void setAlarmMode(int alarmMode);
    //設定起始角度
    void setStartAngle(int startAngle);
    //設定圓環間距
    void setRingPadding(int ringPadding);
    //設定圓環寬度
    void setRingWidth(int ringWidth);

    //設定是否啟用動畫顯示
    void setAnimation(bool animation);
    //設定動畫顯示的步長
    void setAnimationStep(double animationStep);

    //設定背景顔色
    void setBgColor(const QColor &bgColor);
    //設定文本顔色
    void setTextColor(const QColor &textColor);
    //設定圓環進度顔色
    void setRingColor(const QColor &ringColor);
    //設定圓環背景顔色
    void setRingBgColor(const QColor &ringBgColor);
    //設定中心圓顔色
    void setCircleColor(const QColor &circleColor);

    //設定三種值
    void setRingValue1(int ringValue1);
    void setRingValue2(int ringValue2);
    void setRingValue3(int ringValue3);

    //設定三種顔色
    void setRingColor1(const QColor &ringColor1);
    void setRingColor2(const QColor &ringColor2);
    void setRingColor3(const QColor &ringColor3);

Q_SIGNALS:
    void valueChanged(int value);
};

#endif // PROGRESSRING_H

五、核心代碼

void ProgressRing::paintEvent(QPaintEvent *)
{
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);

    //繪制準備工作,啟用反鋸齒,平移坐标軸中心,等比例縮放
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height / 2);
    painter.scale(side / 200.0, side / 200.0);

    //繪制背景
    drawBg(&painter);
    //繪制進度
    drawRing(&painter);

    //繪制間隔,重新繪制一個圓遮住,産生間距效果
    if (ringPadding > 0) {
        drawPadding(&painter);
    }

    //繪制中間圓
    drawCircle(&painter);
    //繪制目前值
    drawValue(&painter);
}

void ProgressRing::drawBg(QPainter *painter)
{
    int radius = 99;
    painter->save();
    painter->setPen(Qt::NoPen);
    //這裡有個技巧,如果沒有間距則設定成圓環的背景色
    painter->setBrush(ringPadding == 0 ? ringBgColor : bgColor);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}

void ProgressRing::drawRing(QPainter *painter)
{
    int radius = 99 - ringPadding;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(ringColor);

    QRectF rect(-radius, -radius, radius * 2, radius * 2);

    //計算總範圍角度,目前值範圍角度,剩餘值範圍角度
    double angleAll = 360.0;
    double angleCurrent = angleAll * ((currentValue - minValue) / (maxValue - minValue));
    double angleOther = angleAll - angleCurrent;

    //如果逆時針
    if (!clockWise) {
        angleCurrent = -angleCurrent;
        angleOther = -angleOther;
    }

    //動态設定目前進度顔色
    QColor color = ringColor;
    if (alarmMode == 1) {
        if (currentValue >= ringValue3) {
            color = ringColor3;
        } else if (currentValue >= ringValue2) {
            color = ringColor2;
        } else {
            color = ringColor1;
        }
    } else if (alarmMode == 2) {
        if (currentValue <= ringValue1) {
            color = ringColor1;
        } else if (currentValue <= ringValue2) {
            color = ringColor2;
        } else {
            color = ringColor3;
        }
    }

    //繪制目前值餅圓
    painter->setBrush(color);
    painter->drawPie(rect, (startAngle - angleCurrent) * 16, angleCurrent * 16);

    //繪制剩餘值餅圓
    painter->setBrush(ringBgColor);
    painter->drawPie(rect, (startAngle - angleCurrent - angleOther) * 16, angleOther * 16);

    painter->restore();
}

void ProgressRing::drawPadding(QPainter *painter)
{
    int radius = 99 - ringWidth - ringPadding;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(bgColor);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}

void ProgressRing::drawCircle(QPainter *painter)
{
    //文字的區域要減去進度的寬度及間距
    int radius = 99 - ringWidth - (ringPadding * 2);
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(circleColor);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}

void ProgressRing::drawValue(QPainter *painter)
{
    //文字的區域要減去進度的寬度及間距
    int radius = 99 - ringWidth - (ringPadding * 2);
    painter->save();
    painter->setPen(textColor);

    QFont font;
    int fontSize = radius - (showPercent ? 20 : 6);
    font.setPixelSize(fontSize);
    painter->setFont(font);

    QRectF textRect(-radius, -radius, radius * 2, radius * 2);
    QString strValue;
    if (showPercent) {
        double percent = (currentValue * 100) / (maxValue - minValue);
        strValue = QString("%1%").arg(percent, 0, 'f', precision);
    } else {
        strValue = QString("%1").arg(currentValue, 0, 'f', precision);
    }

    painter->drawText(textRect, Qt::AlignCenter, strValue);

    painter->restore();
}

六、控件介紹

超過150個精美控件，涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、标尺、溫度計、導覽列、導航欄，flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt內建的控件數量。
每個類都可以獨立成一個單獨的控件，零耦合，每個控件一個頭檔案和一個實作檔案，不依賴其他檔案，友善單個控件以源碼形式內建到項目中，較少代碼量。qwt的控件類環環相扣，高度耦合，想要使用其中一個控件，必須包含所有的代碼。
全部純Qt編寫，QWidget+QPainter繪制，支援Qt4.6到Qt5.12的任何Qt版本，支援mingw、msvc、gcc等編譯器，支援任意作業系統比如windows+linux+mac+嵌入式linux等，不亂碼，可直接內建到Qt Creator中，和自帶的控件一樣使用，大部分效果隻要設定幾個屬性即可，極為友善。
每個控件都有一個對應的單獨的包含該控件源碼的DEMO，友善參考使用。同時還提供一個所有控件使用的內建的DEMO。
每個控件的源代碼都有詳細中文注釋，都按照統一設計規範編寫，友善學習自定義控件的編寫。
每個控件預設配色和demo對應的配色都非常精美。
超過130個可見控件，6個不可見控件。
部分控件提供多種樣式風格選擇，多種訓示器樣式選擇。
所有控件自适應窗體拉伸變化。
內建自定義控件屬性設計器，支援拖曳設計，所見即所得，支援導入導出xml格式。
自帶activex控件demo，所有控件可以直接運作在ie浏覽器中。
內建fontawesome圖形字型+阿裡巴巴iconfont收藏的幾百個圖形字型，享受圖形字型帶來的樂趣。
所有控件最後生成一個dll動态庫檔案，可以直接內建到qtcreator中拖曳設計使用。
目前已經有qml版本，後期會考慮出pyqt版本，如果使用者需求量很大的話。

七、SDK下載下傳

SDK下載下傳連結： https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取碼：877p
下載下傳連結中包含了各個版本的動态庫檔案，所有控件的頭檔案，使用demo，自定義控件+屬性設計器。
自定義控件插件開放動态庫dll使用（永久免費），無任何後門和限制，請放心使用。
目前已提供26個版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
不定期增加控件和完善控件，不定期更新SDK，歡迎各位提出建議，謝謝！
widget版本（QQ：517216493）qml版本（QQ：373955953）三峰駝（QQ：278969898）。
濤哥的知乎專欄 Qt進階之路 https://zhuanlan.zhihu.com/TaoQt
歡迎關注微信公衆号【高效程式員】，C++/Python、學習方法、寫作技巧、熱門技術、職場發展等内容，幹貨多多，福利多多！

Qt編寫自定義控件14-環形進度條

一、前言

二、實作的功能

三、效果圖

四、頭檔案代碼

五、核心代碼

六、控件介紹

七、SDK下載下傳

繼續閱讀

web service 的簡單實作

Web Service 應用執行個體

Web Service開發實戰

更改LYNC SIP位址

終端環境之tmux

lvm建立、擴容

CRC32和CRC8校驗代碼，C語言版

241 Different Ways to Add Parentheses（C代碼版）

HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試

C語言：初學者必定看懂的注釋！！！猴子吃桃問題。猴子第一天摘下若幹個桃子，每天都吃了前一天剩下的一半零一個，到第10天早上想再吃的時候，就剩下一個桃子. 求第一天共摘多少個桃子。

[轉]九大排序算法——C語言實作及詳解

while 循環、do- while 循環和 for 循環之間的那點事C語言自學之三種循環比較

結構體：typedef與struct的差別

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

hdu7108哈希