Qt/C++开源控件 圆形进度条

Qt/C++开源控件 圆形进度条

• 简约风格: 设计简洁，没有多余的元素，清晰地显示了当前进度。
• 颜色对比: 使用了亮色的蓝色来标示进度，与深色背景形成鲜明对比，使得进度指示一目了然。
• 清晰的刻度: 刻度线清晰，尽管没有标注所有数字，但通过较长的刻度线在50和100的位置，用户可以很容易地估计进度。
• 指针设计: 指针末端带有一个圆形装饰，这不仅美观而且提高了指针指向的清晰度。
• 中心百分比显示: 进度的数值以大号字体在控件中心显示，用户可以快速读取数值信息。

#ifndef CIRCULARPROGRESS_H
#define CIRCULARPROGRESS_H

#include <QWidget>
#include <QColor>

class CircularProgress : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)
    Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor)
    Q_PROPERTY(QColor scaleColor READ scaleColor WRITE setScaleColor)

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

    int value() const;
    QColor backgroundColor() const;
    QColor scaleColor() const;

public slots:
    void setValue(int newValue);
    void setBackgroundColor(const QColor &color);
    void setScaleColor(const QColor &color);

signals:
    void valueChanged(int newValue);

protected:
    void paintEvent(QPaintEvent *event) override;

private:
    int m_value;
    QColor m_backgroundColor;
    QColor m_progressColor;
    QColor m_textColor;
    QColor m_scaleColor;

    void drawBackground(QPainter &painter);
    void drawProgress(QPainter &painter);
    void drawHandle(QPainter &painter, double angle);
    void drawScale(QPainter &painter);
};

#endif // CIRCULARPROGRESS_H

#include "circularprogress.h"
#include <QPainter>
#include <QPainterPath>
#include <QtMath>

CircularProgress::CircularProgress(QWidget *parent):
    QWidget(parent),
    m_value(0),
    m_backgroundColor(QColor(100, 100, 100)),//默认背景颜色为灰色
    m_progressColor(Qt::green),
    m_textColor(Qt::white),
    m_scaleColor(Qt::white)//默认刻度线颜色为白色
{
}

CircularProgress::~CircularProgress()
{

}


int CircularProgress::value() const
{
    return m_value;
}

QColor CircularProgress::backgroundColor() const
{
    return m_backgroundColor;
}

QColor CircularProgress::scaleColor() const
{
    return m_scaleColor;
}

void CircularProgress::setValue(int newValue)
{
    if (newValue < 0 || newValue > 100)
    {
        return;
    }
    if (m_value != newValue)
    {
        m_value = newValue;
        emit valueChanged(newValue);
        update();
    }
}

void CircularProgress::setBackgroundColor(const QColor &color)
{
    if (m_backgroundColor != color)
    {
        m_backgroundColor = color;
        update();
    }
}

void CircularProgress::setScaleColor(const QColor &color)
{
    if (m_scaleColor != color)
    {
        m_scaleColor = color;
        update();
    }
}

void CircularProgress::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    drawBackground(painter);
    drawScale(painter);
    drawProgress(painter);
    drawHandle(painter, (m_value / 100.0) * 270.0);//根据进度计算角度
}

void CircularProgress::drawBackground(QPainter &painter)
{
    painter.fillRect(rect(), m_backgroundColor);//绘制背景色
}

void CircularProgress::drawProgress(QPainter &painter)
{
    int width = this->width() - 10;
    int height = this->height() - 10;
    int radius = qMin(width, height) / 2 - 30;//留出边距
    QRectF rectangle(width / 2 - radius, height / 2 - radius, 2 * radius, 2 * radius);

    painter.setPen(QPen(m_progressColor, 5));
    //从左下方开始顺时针到右下方结束，角度计算从（-135°）到（45°）
    int startAngle = -135 * 16;
    int spanAngle = -(m_value / 100.0) * 270 * 16;
    painter.drawArc(rectangle, startAngle, spanAngle);
}

void CircularProgress::drawHandle(QPainter &painter, double angle)
{
    int width = this->width() - 10;
    int height = this->height() - 10;
    int radius = qMin(width, height) / 2 - 30;//留出边距
    int handleRadius = 5;//小圆点的半径

    //将角度从进度条的0%（225°）转换为顺时针角度
    double radian = qDegreesToRadians(-225 + angle);
    int centerX = width / 2 + (radius) * cos(radian);
    int centerY = height / 2 + (radius) * sin(radian);

    painter.setBrush(m_progressColor);
    painter.drawEllipse(QPointF(centerX, centerY), handleRadius, handleRadius);
}

void CircularProgress::drawScale(QPainter &painter)
{
    int width = this->width() - 10;
    int height = this->height() - 10;
    int radius = qMin(width, height) / 2 - 45;//刻度位于进度条内
    painter.setPen(QPen(m_scaleColor, 2));

    for (int i = 0; i <= 100; i += 10)
    {
        //从225°开始到-45°结束，确保顺时针方向
        double angle = -225 + (i / 100.0) * 270;
        double radian = qDegreesToRadians(angle);
        int outerX = width / 2 + radius * cos(radian);
        int outerY = height / 2 + radius * sin(radian);
        int innerX = width / 2 + (radius - 20) * cos(radian);//刻度线长度为10
        int innerY = height / 2 + (radius - 20) * sin(radian);

        painter.drawLine(QPointF(innerX, innerY), QPointF(outerX, outerY));

        //刻度文字
        QString text = QString::number(i);
        QFontMetrics fm(painter.font());
        int textX = width / 2 + (radius + 25) * cos(radian) - fm.width(text) / 2;
        int textY = height / 2 + (radius + 25) * sin(radian) - fm.height() / 3;
        painter.drawText(textX, textY, text);
    }

    //中心百分比文字
    painter.setPen(m_textColor);
    painter.setFont(QFont("Arial", 20, QFont::Bold));
    painter.drawText(rect(), Qt::AlignCenter, QString::number(m_value) + "%");
}