Qt to write custom progress bar arc 71-

I. Introduction

Now web in the form of a graph framework is very popular, made on behalf of that echart, I used a few times, Cock burst three words to describe, very powerful, and ease of use is also very good, open source or free, do not use too cool the built-in a variety of charts and dashboards are very rich, to show the form is very diverse.
This secondary write progress bar arc is a circular arc from the reference echart progress bar in the main structure is rounded outer circle progress, the percentage of the middle with a corresponding title and the progress of the start angle and the end of the progress bar can adjust the angle, so the progress of the upper opening can be anywhere in the lower left to the right, etc., can be achieved by adjusting the angle. The core is drawn drawArc function.

Second, the realization of functions

• 1: The range of values ​​can be set to support a negative value
• 2: Accuracy may be provided, three decimal point when the maximum support
• 3: the width of an arc can be provided
• 4: rotation angle, set the start / end of the rotation angle
• 5: You can set the title dashboard
• 6: you can set the background color / Progress Color / Color value / text color
• 7: Form adaptive stretching, automatic scaling text
• 8: freely expand various gradients
• 9: Percentage mode can be set automatically calculated value into a percentage of

Third, renderings

Fourth, the header file code

#ifndef PROGRESSARC_H
#define PROGRESSARC_H

/**
 * 百分比仪表盘控件 作者:feiyangqingyun(QQ:517216493) 2018-8-30
 * 1:可设置范围值,支持负数值
 * 2:可设置精确度,最大支持小数点后3位
 * 3:可设置圆弧宽度
 * 4:可设置开始旋转角度/结束旋转角度
 * 5:可设置仪表盘的标题
 * 6:可设置背景颜色/进度颜色/值颜色/文字颜色
 * 7:自适应窗体拉伸,文字自动缩放
 * 8:可自由拓展各种渐变色
 * 9:可设置百分比模式,自动计算值换算成百分比
 */

#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 ProgressArc : public QWidget
#else
class ProgressArc : 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(int startAngle READ getStartAngle WRITE setStartAngle)
    Q_PROPERTY(int endAngle READ getEndAngle WRITE setEndAngle)

    Q_PROPERTY(QColor arcColor READ getArcColor WRITE setArcColor)
    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
    Q_PROPERTY(QColor titleColor READ getTitleColor WRITE setTitleColor)
    Q_PROPERTY(QColor baseColor READ getBaseColor WRITE setBaseColor)
    Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)

    Q_PROPERTY(bool percent READ getPercent WRITE setPercent)
    Q_PROPERTY(int arcWidth READ getArcWidth WRITE setArcWidth)
    Q_PROPERTY(QString title READ getTitle WRITE setTitle)

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

protected:
    void paintEvent(QPaintEvent *);
    void drawArc(QPainter *painter);
    void drawValue(QPainter *painter);
    void drawTitle(QPainter *painter);

private:
    double minValue;                //最小值
    double maxValue;                //最大值
    double value;                   //目标值
    int precision;                  //精确度,小数点后几位

    int startAngle;                 //开始旋转角度
    int endAngle;                   //结束旋转角度

    QColor arcColor;                //圆弧颜色
    QColor textColor;               //文字颜色
    QColor titleColor;              //标题颜色
    QColor baseColor;               //基准颜色
    QColor bgColor;                 //背景颜色

    bool percent;                   //百分比模式
    int arcWidth;                   //圆弧宽度
    QString title;                  //标题

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

    int getStartAngle()             const;
    int getEndAngle()               const;

    QColor getArcColor()            const;
    QColor getTextColor()           const;
    QColor getTitleColor()          const;
    QColor getBaseColor()           const;
    QColor getBgColor()             const;

    bool getPercent()               const;
    int getArcWidth()               const;
    QString getTitle()              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 setStartAngle(int startAngle);
    //设置结束旋转角度
    void setEndAngle(int endAngle);

    //设置圆弧颜色
    void setArcColor(const QColor &arcColor);
    //设置文本颜色
    void setTextColor(const QColor &textColor);
    //设置标题颜色
    void setTitleColor(const QColor &titleColor);
    //设置基准颜色
    void setBaseColor(const QColor &baseColor);
    //设置背景颜色
    void setBgColor(const QColor &bgColor);

    //设置百分比模式
    void setPercent(bool percent);
    //设置圆弧宽度
    void setArcWidth(int arcWidth);
    //设置标题
    void setTitle(const QString &title);

Q_SIGNALS:
    void valueChanged(int value);
};

#endif // PROGRESSARC_H

Fifth, the core code

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

    //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //绘制背景
    if (bgColor != Qt::transparent) {
        painter.setPen(Qt::NoPen);
        painter.fillRect(this->rect(), bgColor);
    }

    painter.translate(width / 2, height / 2);
    painter.scale(side / 200.0, side / 200.0);

    //绘制圆弧
    drawArc(&painter);
    //绘制当前值
    drawValue(&painter);
    //绘制标题
    drawTitle(&painter);
}

void ProgressArc::drawArc(QPainter *painter)
{
    int radius = 99 - arcWidth;
    painter->save();
    painter->setBrush(Qt::NoBrush);

    QPen pen;
    pen.setWidthF(arcWidth);
    pen.setCapStyle(Qt::RoundCap);

    //计算总范围角度,当前值范围角度,剩余值范围角度
    double angleAll = 360.0 - startAngle - endAngle;
    double angleCurrent = angleAll * ((value - minValue) / (maxValue - minValue));
    double angleOther = angleAll - angleCurrent;
    QRectF rect = QRectF(-radius, -radius, radius * 2, radius * 2);

    //绘制圆弧背景
    pen.setColor(baseColor);
    painter->setPen(pen);
    painter->drawArc(rect, (270 - startAngle - angleCurrent - angleOther) * 16, angleOther * 16);

    //绘制圆弧进度
    pen.setColor(arcColor);
    painter->setPen(pen);
    painter->drawArc(rect, (270 - startAngle - angleCurrent) * 16, angleCurrent * 16);

    painter->restore();
}

void ProgressArc::drawValue(QPainter *painter)
{
    int radius = 100;
    painter->save();
    painter->setPen(textColor);

    QFont font;
    font.setPixelSize(40);
    painter->setFont(font);
    
    QString strValue;
    if (percent) {
        double temp = value / (maxValue - minValue) * 100;
        strValue = QString("%1%").arg(temp, 0, 'f', precision);
    } else {
        strValue = QString("%1").arg((double)value, 0, 'f', precision);
    }

    QRectF textRect(-radius, 0, radius * 2, radius / 3);
    painter->drawText(textRect, Qt::AlignCenter, strValue);

    painter->restore();
}

void ProgressArc::drawTitle(QPainter *painter)
{
    double radius = 100;
    painter->save();
    painter->setPen(titleColor);

    QFont font;
    font.setPixelSize(25);
    painter->setFont(font);

    QRectF textRect(-radius, -radius / 2.5, radius * 2, radius / 3);
    painter->drawText(textRect, Qt::AlignCenter, title);

    painter->restore();
}

Sixth, the controls described

1. More than 160 exquisite control, covers a variety of dashboards, progress bar, the progress of the ball, compass, graphs, scales, thermometers, navigation bar, navigation bar, flatui, highlight the button, slide the selector, the lunar calendar and so on. Qwt far more than the number of controls integration.
2. Each class can be independently as a separate control, zero coupling each control file and a header file to achieve a code amount, independent of other files to facilitate individual control integrated into the project source code form, less. qwt interlocking control class, highly coupled, want to use one of the controls, must contain all the code.
3. Write all pure Qt, QWidget + QPainter to draw, to support any Qt version Qt4.6 Qt5.13, support for mingw, msvc, gcc compiler, etc., support any operating system such as windows + linux + mac + embedded linux, which does not garbled can be directly integrated into Qt Creator, a built-in controls and use the same, most of the effects can be as long as several properties are set, very convenient.
4. DEMO separate source containing the control corresponding to each control has a convenient reference. It also provides integrated use of all controls a DEMO.
5. Source code for each control has detailed Chinese annotation, are prepared in accordance with unified design specifications, easy to learn to write custom controls.
6. Each control default color and demo corresponding color is very beautiful.
7. More than 130 visible control, six invisible control.
8. Portion control provides a variety of styles style selection, multiple choice style indicator.
9. All controls changes adaptive stretched form.
10. Integrated design custom attribute that supports drag design, WYSIWYG support the import and export in xml format.
11. Activex control that comes with demo, all controls can be run directly in the browser ie.
12. Fontawesome integrated graphics font + Alibaba iconfont collection of hundreds of graphic fonts, font fun graphic brings.
13. All controls and finally generate a dynamic library files (dll or so, etc.) can be integrated directly into qtcreator designed for use in drag.
14. Already qml version, the latter will consider a pyqt version, if the user is in great demand then.
15. Custom plug-in open dynamic library (permanent free), and the back door without any restrictions, ease of use.
16. Now offers 32 versions of the dll, which qt_5_7_0_mingw530_32 this version will always ensure that the latest complete.
17. From time to time to increase control and improve controls, regularly updated SDK, to welcome all suggestions, thank you!
18. Qt introductory books recommended Huo Yafei of "Qt Creator Quick Start" "Qt5 programming entry", Qt official Advanced book recommendations "C ++ GUI Qt4 programming."
19. Highly recommended programmer self-discipline and planning book series "lying programmer" "Programmer's growth course", "grief programmer", benefited from a lifetime!
20. SDK Address: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk