Qt5利用自绘QPainter实现水波纹进度条QProgressBarWater

.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += 
    QProgressBarWater.cpp 
    main.cpp 
    mainwindow.cpp

HEADERS += 
    QProgressBarWater.h 
    mainwindow.h

FORMS += 
    mainwindow.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

#include "QProgressBarWater.h"

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_horizontalSlider_valueChanged(int value);

private:
    Ui::MainWindow *ui;
    QProgressBarWater *m_pQProgressBarWater;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    m_pQProgressBarWater = new QProgressBarWater(this);
    m_pQProgressBarWater->setGeometry(20, 20, 200, 300);
    m_pQProgressBarWater->setMaxValue(100);
    m_pQProgressBarWater->setMinValue(0);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_horizontalSlider_valueChanged(int value)
{
    m_pQProgressBarWater->setValue(value);
}

mainwindow.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>401</width>
    <height>345</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QSlider" name="horizontalSlider">
    <property name="geometry">
     <rect>
      <x>20</x>
      <y>250</y>
      <width>351</width>
      <height>22</height>
     </rect>
    </property>
    <property name="maximum">
     <number>100</number>
    </property>
    <property name="orientation">
     <enum>Qt::Horizontal</enum>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>401</width>
     <height>23</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

QProgressBarWater.h

// https://blog.csdn.net/u012156872/article/details/110396056
#ifndef QPROGRESSBARWATER_H
#define QPROGRESSBARWATER_H


#include <QWidget>
#include <QPainter>
#include <QPaintEvent>

class QProgressBarWater : public QWidget
{
    Q_OBJECT

public:
    explicit QProgressBarWater(QWidget *parent = nullptr);

    enum PercentStyle_Type{
        PercentStyle_Rect = 0,  //矩形
        PercentStyle_Circle,    //圆
        PercentStyle_Ellipse,   //椭圆
    };

signals:

public slots:

protected:
    virtual void paintEvent(QPaintEvent *event);
    virtual void timerEvent(QTimerEvent *event);

private:
    PercentStyle_Type m_percentStyle = PercentStyle_Circle;
    QColor m_frontColor = Qt::green;
    QColor m_textColor = Qt::white;
    QColor m_boderColor = Qt::white;
    QColor m_bgColor = QColor(0, 200, 0, 200);
    QFont m_font;
    int m_value = 50;
    int m_minValue = 0;
    int m_maxValue = 100;
    int m_waterDensity = 1;
    double m_waterHeight = 0.03;
    double m_offset = 50;
    int m_borderWidth = 0;


    void drawValue(QPainter *painter);

public:
    void setValue(int value);
    int value();
    void setMaxValue(int value);
    int maxValue();
    void setMinValue(int value);
    int minValue();
    void setPercentStyle(QProgressBarWater::PercentStyle_Type type);
    PercentStyle_Type percentStyle();
    void setWaterDensity(int val);
    int waterDensity();
    void setColor(QColor col);
    QColor color();
    void setWaterHeight(double val);
    double waterHeight();
    void setBorderWidth(int val);
    int borderWidth();
    void setTextColor(QColor col);
    QColor textColor();
    void setBoderColor(QColor col);
    QColor boderColor();
    void setBgColor(QColor col);
    QColor bgColor();
};

#endif // QPROGRESSBARWATER_H

QProgressBarWater.cpp

#include "QProgressBarWater.h"


#include <QPainter>
#include <qmath.h>
#include <QBrush>
#include <QColor>
#include <QLinearGradient>

QProgressBarWater::QProgressBarWater(QWidget *parent) : QWidget(parent)
{
    m_font.setFamily("Microsoft YaHei");
    this->startTimer(80);
}

void QProgressBarWater::setValue(int value)
{
    m_value = qMax(m_minValue, qMin(m_maxValue, value));
}

int QProgressBarWater::value()
{
    return m_value;
}

void QProgressBarWater::setMaxValue(int value)
{
    m_maxValue = value;
}

int QProgressBarWater::maxValue()
{
    return m_maxValue;
}

void QProgressBarWater::setMinValue(int value)
{
    m_minValue = value;
}

int QProgressBarWater::minValue()
{
    return m_minValue;
}

void QProgressBarWater::setPercentStyle(QProgressBarWater::PercentStyle_Type type)
{
    m_percentStyle = type;
}

QProgressBarWater::PercentStyle_Type QProgressBarWater::percentStyle()
{
    return m_percentStyle;
}

void QProgressBarWater::setWaterDensity(int val)
{
    m_waterDensity = val;
}

int QProgressBarWater::waterDensity()
{
    return m_waterDensity;
}

void QProgressBarWater::setColor(QColor col)
{
    m_frontColor = col;
}

QColor QProgressBarWater::color()
{
    return m_frontColor;
}

void QProgressBarWater::setWaterHeight(double val)
{
    m_waterHeight = val;
}

double QProgressBarWater::waterHeight()
{
    return m_waterHeight;
}

void QProgressBarWater::setBorderWidth(int val)
{
    m_borderWidth = val;
}

int QProgressBarWater::borderWidth()
{
    return m_borderWidth;
}

void QProgressBarWater::setTextColor(QColor col)
{
    m_textColor = col;
}

QColor QProgressBarWater::textColor()
{
    return m_textColor;
}

void QProgressBarWater::setBoderColor(QColor col)
{
    m_boderColor = col;
}

QColor QProgressBarWater::boderColor()
{
    return m_boderColor;
}

void QProgressBarWater::setBgColor(QColor col)
{
    m_bgColor = col;
}

QColor QProgressBarWater::bgColor()
{
    return m_bgColor;
}

void QProgressBarWater::timerEvent(QTimerEvent *event)
{
    Q_UNUSED(event);

    this->update();
}

void QProgressBarWater::drawValue(QPainter *painter)
{
    Q_UNUSED(painter);
    painter->setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing | QPainter::HighQualityAntialiasing | QPainter::SmoothPixmapTransform); // 反锯齿;

    int height = this->height();
    int width = this->width();
    int side = qMin(width, height);

    //计算当前值所占百分比
    double percent = 1 - (double)(m_value - m_minValue) / (m_maxValue - m_minValue);

    //正弦曲线公式 y = A * sin(ωx + φ) + k
    //w表示周期,可以理解为水波的密度,值越大密度越大(浪越密集 ^_^),取值 密度*M_PI/宽度
    double w = 0.038;//m_waterDensity * M_PI * 1.6/ width;

    //A表示振幅,可以理解为水波的高度,值越大高度越高(越浪 ^_^),取值高度的百分比
    double A = height * m_waterHeight;

    //k表示y轴偏移,可以理解为进度,取值高度的进度百分比
    double k = height * percent;

    //第一条波浪路径集合
    QPainterPath waterPath1;

    //第二条波浪路径集合
    QPainterPath waterPath2;

    //移动到左上角起始点
    waterPath1.moveTo(0, height);
    waterPath2.moveTo(0, height);

    m_offset += 0.6;
    if (m_offset > (width / 2)) {
        m_offset = 0;
    }

    double waterY1 = 0.0;
    double waterY2 = 0.0;
    for(int x = 0; x <= width; x++) {
        //第一条波浪Y轴
        waterY1 = (double)(A * qSin(w * x + m_offset)) + k;

        //第二条波浪Y轴
        waterY2 = (double)(A * qSin(w * x + m_offset + (width / 2 * w))) + k;

        //如果当前值为最小值则Y轴为高度
        if (m_value == m_minValue) {
            waterY1 = height;
            waterY2 = height;
        }

        //如果当前值为最大值则Y轴为0
        if (m_value == m_maxValue) {
            waterY1 = 0;
            waterY2 = 0;
        }

        waterPath1.lineTo(x, waterY1);
        waterPath2.lineTo(x, waterY2);
    }

    //移动到右下角结束点,整体形成一个闭合路径
    waterPath1.lineTo(width, height);
    waterPath2.lineTo(width, height);

    //画背景，此处由单一色调改为了渐变色
    QRadialGradient radialGradient(side / 2, height / 2, side / 2, side / 2, side / 2);
    radialGradient.setColorAt(0, QColor(0, 0, 255, 100));
    radialGradient.setColorAt(1.0, QColor(50, 50, 255, 200));

    QPainterPath bigPath;
    if (m_percentStyle == PercentStyle_Rect) {
        width = width - m_borderWidth * 2;
        height = height - m_borderWidth * 2;
        bigPath.addRect(m_borderWidth, m_borderWidth, width, height);
        //painter->setBrush(m_boderColor);
        painter->setBrush(QBrush(radialGradient));
        painter->drawRect(this->rect());
        //painter->setBrush(m_bgColor);
        painter->setBrush(QBrush(radialGradient));
        painter->drawRect(m_borderWidth, m_borderWidth, width, height);
    }
    else if (m_percentStyle == PercentStyle_Circle) {
        //painter->setBrush(m_boderColor);
//        painter->setBrush(QBrush(radialGradient));
//        painter->drawEllipse((width - side) / 2, (height - side) / 2, side, height);
        side = side - m_borderWidth * 2;
        bigPath.addEllipse((width - side) / 2, m_borderWidth, side, side);
        //painter->setBrush(m_bgColor);
        painter->setBrush(QBrush(radialGradient));
        painter->setPen(m_bgColor);
        painter->drawEllipse((width - side) / 2, m_borderWidth, side, side);
    }
    else if (m_percentStyle == PercentStyle_Ellipse) {
        width = width - m_borderWidth * 2;
        height = height - m_borderWidth * 2;
        bigPath.addEllipse(m_borderWidth, m_borderWidth, width, height);
        //painter->setBrush(m_boderColor);
        painter->setBrush(QBrush(radialGradient));
        painter->drawEllipse(this->rect());
        //painter->setBrush(m_bgColor);
        painter->setBrush(QBrush(radialGradient));
        painter->drawEllipse(m_borderWidth, m_borderWidth, width, height);
    }

    painter->save();

    //新路径,用大路径减去波浪区域的路径,形成遮罩效果
    QPainterPath path;
    painter->setPen(Qt::NoPen);
    QColor waterColor1 = m_frontColor;
    waterColor1.setAlpha(100);
    QColor waterColor2 = m_frontColor;
    waterColor2.setAlpha(180);

    QLinearGradient linearGradient1(0,0,0,side);
    linearGradient1.setColorAt(0.2,QColor(0, 255, 255, 100));
    linearGradient1.setColorAt(0.6,QColor(50, 200, 50, 100));
    linearGradient1.setColorAt(1.0,QColor(25, 150, 25, 100));

    QLinearGradient linearGradient2(0,0,0,side);
    linearGradient2.setColorAt(0.2,QColor(0, 255, 255, 180));
    linearGradient2.setColorAt(0.6,QColor(50, 200, 50, 180));
    linearGradient2.setColorAt(1.0,QColor(25, 150, 25, 180));

    //第一条波浪挖去后的路径
    path = bigPath.intersected(waterPath1);
    painter->setBrush(QBrush(linearGradient1));
    painter->drawPath(path);

    //第二条波浪挖去后的路径
    path = bigPath.intersected(waterPath2);
    painter->setBrush(QBrush(linearGradient2));
    painter->drawPath(path);
    painter->restore();

    //绘制文字
    m_font.setPixelSize(this->width()/4);
    painter->setPen(m_textColor);
    painter->setFont(m_font);
    painter->drawText(this->rect(), Qt::AlignCenter, QString("%0%").arg(QString::number(m_value)));
}

void QProgressBarWater::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);
    drawValue(&painter);
}