I. Introducción

Hoy en día, los marcos de gráficos basados en web son muy populares. El representante nacional es echart. Lo he usado varias veces. Puedo describirlo en tres palabras: es muy poderoso y fácil de usar. Es de código abierto y gratuito. No estará muy feliz de usarlo. Los diversos gráficos y paneles integrados son muy ricos y las formas de presentación también son muy diversas.
La barra de progreso del arco que se escribirá esta vez es una referencia a la barra de progreso del arco en echart. La estructura principal es un círculo de progreso redondeado en la periferia, con un título y el porcentaje de progreso correspondiente en el medio, y el ángulo inicial y final. de la barra de progreso. El ángulo se puede ajustar por sí solo, de modo que la apertura de la barra de progreso pueda estar en cualquier lugar a la izquierda, derecha, arriba, abajo, etc., ajustando el ángulo. El núcleo del dibujo es la función drawArc.

2. Funciones implementadas

1: se puede establecer el valor del rango y se admiten valores negativos
2: Se puede configurar la precisión, admitiéndose un máximo de 3 decimales.
3: Se puede configurar el ancho del arco
4: Se puede configurar el ángulo de rotación inicial/ángulo de rotación final
5: Se puede configurar el título del panel
6: Se puede configurar el color de fondo/color de progreso/color de valor/color de texto
7: Estiramiento de formulario adaptable, escalado automático de texto
8: Puedes expandir libremente varios colores degradados
9: El modo de porcentaje se puede configurar para convertir automáticamente el valor calculado en un porcentaje.

3. Dibujo de efectos

4. Código del archivo de encabezado

#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

Como beneficio de este artículo, puede recibir un paquete de aprendizaje de desarrollo de Qt y videos técnicos de forma gratuita, que incluyen (conceptos básicos del lenguaje C++, introducción a la programación de Qt, mecanismo de ranura y señal de QT, dibujo de imágenes de desarrollo de interfaz de QT, red de QT, base de datos de QT). programación, práctica de proyectos QT , para recibir la tarifa↓↓

5. Código central

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();
}

6. Introducción al control

Más de 160 controles exquisitos, que cubren varios paneles, barras de progreso, bolas de progreso, brújulas, curvas, reglas, termómetros, barras de navegación, barras de navegación, flatui, botones resaltados, selectores deslizantes, calendario lunar, etc. Supera con creces el número de controles integrados por qwt.
Cada clase se puede formar de forma independiente en un control separado, con acoplamiento cero. Cada control tiene un archivo de encabezado y un archivo de implementación, y no depende de otros archivos. Es conveniente que un solo control se integre en el proyecto en la forma de código fuente, con menos código. Las clases de control de qwt están entrelazadas y altamente acopladas. Si desea utilizar uno de los controles, debe incluir todo el código.
Todo escrito en Qt puro, dibujado por QWidget+QPainter, admite cualquier versión de Qt desde Qt4.6 a Qt5.13, admite compiladores como mingw, msvc, gcc, etc., y admite cualquier sistema operativo como windows+linux+mac. + Linux incorporado, etc., sin código confuso, se puede integrar directamente en Qt Creator y usarse como los controles integrados. La mayoría de los efectos solo necesitan configurar algunas propiedades, lo cual es extremadamente conveniente.
Cada control tiene una DEMO independiente correspondiente que contiene el código fuente del control para una fácil referencia y uso. También proporciona una DEMO integrada utilizada por todos los controles.
El código fuente de cada control tiene comentarios chinos detallados y está escrito de acuerdo con especificaciones de diseño unificadas, lo que facilita aprender a escribir controles personalizados.
La combinación de colores predeterminada de cada control y la combinación de colores correspondiente a la demostración son muy exquisitas.
Más de 130 controles visibles y 6 controles invisibles.
Algunos controles ofrecen múltiples opciones de estilo y múltiples opciones de estilo de indicador.
Todos los controles se adaptan para formar cambios de estiramiento.
Diseñador de atributos de control personalizado integrado, admite diseño de arrastrar y soltar, WYSIWYG, admite importación y exportación de formato xml.
Viene con una demostración de control ActiveX, todos los controles se pueden ejecutar directamente en el navegador IE.
Integre fuentes gráficas fontawesome + cientos de fuentes gráficas recopiladas por Alibaba iconfont y disfrute de la diversión que brindan las fuentes gráficas.
Todos los controles finalmente generan un archivo de biblioteca dinámica (dll o algo así, etc.), que se puede integrar directamente en qtcreator para el diseño de arrastrar y soltar.
Ya existe una versión qml y más adelante se considerará una versión pyqt si hay una gran demanda por parte de los usuarios.
El complemento de control personalizado está abierto al uso de la biblioteca dinámica (gratuito para siempre), sin puertas traseras ni restricciones, así que no dude en utilizarlo.
Actualmente, se han proporcionado 32 versiones de dll, entre las cuales siempre se garantizará que la versión qt_5_7_0_mingw530_32 será la más reciente y completa.
Los controles se agregan y mejoran de vez en cuando, y el SDK se actualiza de vez en cuando. Las sugerencias son bienvenidas, ¡gracias!
Para libros introductorios de Qt, recomendamos "Inicio rápido con Qt Creator" e "Introducción a la programación Qt5" de Huo Yafei. Para libros avanzados de Qt, recomendamos la "Programación Qt4 GUI C ++ oficial".
Recomiendo encarecidamente la serie de libros de planificación y autocultivo para programadores, "The Big Talk Programmer", "Programmer's Growth Course" y "The Worry-Relieving Programmer", que le beneficiarán mucho y le durarán toda la vida.
Dirección del SDK: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk

Enlace original: cnblogs.com/feiyangqingyun/p/11684893.html

Qt escribe controles personalizados: barra de progreso de arco