Qt QWidget自绘控件

最近在研究Qt的自绘控件，在https://qtchina.blog.csdn.net/这位大佬的博客学到了很多，下面记录下过程，先上一波图吧。

 上面的自绘仪表都是模仿飞扬青云那位大佬的QUI样子自绘的，但代码都自己实现，因为那位大佬有些是不开源的。其实自绘的话，套路基本都一样。我非常喜欢他的一句话：心中有坐标，万物皆可paint。

首先继承QWidget类，当然你可以根据需求，继承QWidget的派生类，如QPushbutton，QLabel等等。然后就是重写paintEvent。下面以最后一个为例子：

#ifndef WATERPROGRESSBAR_H
#define WATERPROGRESSBAR_H

#include 

class WaterProgressBar : public QWidget//继承QWidget
{
    Q_OBJECT
public:
    explicit WaterProgressBar(QWidget *parent = nullptr);

    void setVaule(int value);

public slots:
    void updaterWater();//定时更新，让波浪动起来

protected:
    void paintEvent(QPaintEvent *event) override;//自绘控件
    //实现左右拖动改变value
    void mousePressEvent(QMouseEvent *event) override;
    void mouseReleaseEvent(QMouseEvent *event) override;
    void mouseMoveEvent(QMouseEvent *event) override;

private:
    int m_value;
    qreal m_offset;

    bool m_isPressed;
    QPoint m_startPoint;

    void drawWater(QPainter* painter);//画水波浪
    void drawText(QPainter* painter);//画中间数值
    void drawBg(QPainter* painter);//画背景
};

#endif // WATERPROGRESSBAR_H

#include "WaterProgressBar.h"
#include 
#include 
#include 
#include 

WaterProgressBar::WaterProgressBar(QWidget *parent) : QWidget(parent)
{
    m_value = 0;
    m_offset = 0;

    m_isPressed = false;

    QTimer *timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, &WaterProgressBar::updaterWater);
    timer->start(30);//定时30毫秒
}

void WaterProgressBar::setVaule(int value)
{
    m_value = value;
    update();
}

void WaterProgressBar::updaterWater()
{
    m_offset=m_offset+0.15;//波浪偏移
    if (m_offset >= 360)
        m_offset = 0;
    update();
}

void WaterProgressBar::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)
    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);//设置坐标系拉伸为200*200

    drawBg(&painter);//画背景
    drawWater(&painter);//画水波浪
    drawText(&painter);//画中间数值
}

void WaterProgressBar::drawWater(QPainter* painter)
{
    int radius = 100;//坐标系高度，上为-，下为+

    if (m_value == 0){//没波浪，不用画
        return;
    }
    else if (m_value == 100) {//波浪满，直接画圆
        painter->save();
        painter->setPen(Qt::NoPen);
        painter->setBrush(QBrush(QColor(100, 180, 250, 230)));
        painter->drawEllipse(QRect(-radius, -radius, radius*2, radius*2));
        painter->restore();
    }
    else//画波浪
    {
        int height = 2*(-m_value+50);//波浪在坐标系中的高度位置
        painter->save();
        QPainterPath wavePath; //波浪区域
        QPainterPath wavePath2; //波浪区域
        wavePath.moveTo(-radius, radius);//第一点坐标为（0,height）;
        for(int x = -radius; x < radius; x++)  //x从0~w的值而改变，从而得到正弦曲线
        {
            double waveY = 4*qSin(1.8*(x*M_PI/180 + m_offset)) + height;// waveY随着x的值改变而改变，从而得到正弦曲线
            wavePath.lineTo(x, waveY);   //从上一个绘制点画一条线到（x，waveY）；
        }
        wavePath.lineTo(radius, radius); //右下角，坐标（width, height），移动到右下角结束点,整体形成一个闭合路径

        wavePath2.moveTo(-radius, radius);//第一点坐标为（0,height）;
        for(int x = -radius; x < radius; x++)  //x从0~w的值而改变，从而得到正弦曲线
        {
            double waveY = 4*qSin(1.8*(x*M_PI/180 + m_offset + 2)) + height;// waveY随着x的值改变而改变，从而得到正弦曲线
            wavePath2.lineTo(x, waveY);   //从上一个绘制点画一条线到（x，waveY）；
        }
        wavePath2.lineTo(radius, radius); //右下角，坐标（width, height），移动到右下角结束点,整体形成一个闭合路径

        QPainterPath bigPath;
        bigPath.addEllipse(QRect(-radius, -radius, radius*2, radius*2));
        wavePath = bigPath.intersected(wavePath);
        wavePath2 = bigPath.intersected(wavePath2);

        painter->setPen(Qt::NoPen);
        painter->setBrush(QBrush(QColor(100, 184, 255, 80)));
        painter->drawPath(wavePath);      //绘制路径
        painter->setBrush(QBrush(QColor(100, 180, 250, 230)));
        painter->drawPath(wavePath2);      //绘制路径
        painter->restore();
    }
}

void WaterProgressBar::drawText(QPainter* painter){
    int radius = 40;
    painter->save();
    QString text = QString("%1%").arg(m_value);
    QFont font = painter->font();
    font.setPixelSize(40);
    painter->setFont(font);
    QPen pen = painter->pen();
    pen.setColor(Qt::white);
    pen.setWidth(4);
    painter->setPen(pen);
    QRect rect(-radius,-radius,radius*2,radius*2);
    painter->drawText(rect,Qt::AlignCenter,text);
    painter->restore();
}

void WaterProgressBar::drawBg(QPainter* painter){
    int outRadius = 100;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(QColor(40,40,40));
    QRect rect(-outRadius,-outRadius,outRadius*2,outRadius*2);
    painter->drawEllipse(rect);
    painter->restore();
}

void WaterProgressBar::mousePressEvent(QMouseEvent *event)
{
    m_isPressed = true;
    m_startPoint = event->pos();
}

void WaterProgressBar::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event)
    m_isPressed = false;
}

void WaterProgressBar::mouseMoveEvent(QMouseEvent *event)
{
    if (m_isPressed)
    {
        if (m_startPoint.x()<=0 || m_startPoint.x()>=width())
        {
            m_startPoint = event->pos();
            return;
        }
        if (event->pos().x() > m_startPoint.x())
        {
            int addVaule = qCeil((100-m_value)*1.0/(width()-m_startPoint.x()));
            if (m_value < 100)
                setVaule(m_value+addVaule);
        }
        else if (event->pos().x() < m_startPoint.x()){
            int addVaule = qCeil(m_value*1.0/m_startPoint.x());
            if (m_value > 0)
                setVaule(m_value-addVaule);
        }
        m_startPoint = event->pos();
    }
}

内容不多，就是坐标计算可能看起来会复杂些。个人觉得需要注意的下面几点：

1.painter有自己的坐标系，一开始是与控件窗口坐标系是一样的，右、下为正。为了方便计算，所以习惯上将painter的坐标系中心转到窗口中间：painter.translate(width / 2, height / 2);

然后将其拉伸到200*200，这样子就是，-100到100，这样子就可以按照比例直接计算，与宽高无关了：painter.scale(side / 200.0, side / 200.0);

之后就可以按照这个坐标系来绘画：

当然，如果你想和数学坐标系一样，那也可以： painter.scale(side / 200.0, -side / 200.0);

2.qSin(qreal v)等三角函数中的参数v是是弧度，不是角度，所以需要转换下：