QT学习-QPainter绘图

---

前言

本文主要介绍利用QPainter绘制柱状图，并动态更新高度。

一、创建qbarpainter类

新建qbarpainter类，继承QWidget

并添加以下.cpp和.h代码：

#include "qbarpainter.h"

qbarpainter::qbarpainter(QWidget *parent) : QWidget(parent)
{
    this->setAttribute(Qt::WA_TranslucentBackground);
}


void qbarpainter::paintEvent( QPaintEvent * )
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush( QColor(0x00,0xff,0x00,0x00));//QColor("white"));
    painter.drawRect(rect());

    drawBarIndex(display_value,painter,QColor("#7A6864"));

}


void qbarpainter::drawBarIndex(int valus ,QPainter &painter, QColor color )
{
    int w = width();
    int h = height()/4;
    int leftw = 0;
    int step = valus*h*2/100;

    //bottom 椭圆
    painter.save();
    QRectF bottomrect(leftw,h*3-10,w,15);
    QLinearGradient bottomlinear(leftw,h*3-step,w,step);
    bottomlinear.setColorAt(0, color);
    bottomlinear.setColorAt(0.3, color.lighter(200));
    bottomlinear.setColorAt(0.35, color.lighter(180));
    bottomlinear.setColorAt(0.9, color.darker(200));
    bottomlinear.setColorAt(1, color);
    bottomlinear.setStart(leftw,h);
    bottomlinear.setFinalStop(leftw+w,h);
    painter.setPen(Qt::NoPen);
    painter.setBrush(bottomlinear);
    painter.drawEllipse(bottomrect);
    painter.restore();

    //背景
    painter.save();
    QLinearGradient bgLinearGradient(leftw,h,w,h*2);
    bgLinearGradient.setColorAt(0, QColor("#A8C0D0"));
    bgLinearGradient.setColorAt(0.3, QColor("#CFDBE3"));
    bgLinearGradient.setColorAt(0.35, QColor("#A2BBCC").lighter(120));
    bgLinearGradient.setColorAt(0.9, QColor("#767775").lighter(120));
    bgLinearGradient.setColorAt(1, QColor("#A8C0D0"));
    bgLinearGradient.setStart(leftw,h);
    bgLinearGradient.setFinalStop(leftw+w,h);

    QRectF bgrect(leftw,h,w,h*2);

    painter.fillRect(bgrect, bgLinearGradient);
    painter.restore();

    //中间
    painter.save();
    QRectF midrect(leftw,h*3-step,w,step);

    QLinearGradient midLinearGradient(leftw,h*3-step,w,step);
    midLinearGradient.setColorAt(0, color);
    midLinearGradient.setColorAt(0.3, color.lighter(200));
    midLinearGradient.setColorAt(0.35, color.lighter(180));
    midLinearGradient.setColorAt(0.9, color.darker(200));
    midLinearGradient.setColorAt(1, color);
    midLinearGradient.setStart(leftw,h);
    midLinearGradient.setFinalStop(leftw+w,h);

    painter.fillRect(midrect, midLinearGradient);
    painter.restore();

    //top 椭圆
    painter.save();
    painter.setPen(Qt::NoPen);
    QLinearGradient fade3(leftw, h-30,w,100);
    fade3.setColorAt(0, QColor("#A8C0D0"));
    fade3.setColorAt(0.9, QColor("#CFDBE3"));
    fade3.setColorAt(0.35, QColor("#A2BBCC").darker(120));
    fade3.setColorAt(0.3, QColor("#767775").darker(120));
    fade3.setColorAt(0, QColor("#A8C0D0"));
    fade3.setStart(leftw,h-30);
    fade3.setFinalStop(leftw,h+20);
    painter.setBrush(fade3);
    QRectF rectangle(leftw, h-9, w, 16);
    painter.drawEllipse(rectangle);
    painter.restore();
    //

    //mid 椭圆
    painter.save();
    QRectF midtoprect(leftw,h*3-step-9,w,15);

    QLinearGradient midtoplinear(leftw,h*3-step,w,step);
    midtoplinear.setColorAt(0, color.darker(100));
    midtoplinear.setColorAt(0.3, color.darker(100));
    midtoplinear.setColorAt(0.35, color.darker(100));
    midtoplinear.setColorAt(0.9, color.darker(100));
    midtoplinear.setColorAt(1, color.darker(100));
    midtoplinear.setStart(leftw,h);
    midtoplinear.setFinalStop(leftw+w,h);
    painter.setPen(Qt::NoPen);
    painter.setBrush(midtoplinear);
    painter.drawEllipse(midtoprect);
    painter.restore();
}

#ifndef QBARPAINTER_H
#define QBARPAINTER_H

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

class qbarpainter : public QWidget
{
    Q_OBJECT
public:
    int display_value = 0;
    void drawBarIndex(int valus ,QPainter &painter, QColor color );
    explicit qbarpainter(QWidget *parent = nullptr);
protected:
    void paintEvent( QPaintEvent * );

signals:

};

#endif // QBARPAINTER_H

二、添加控件

在ui上添加widget控件，并将控件提升为qbarpainter

三、关联定时器刷新

在MainWindow中添加如下代码：

	qbarpainter *painter;


    painter = ui->widget;
    QTimer *timer = new QTimer(this);
    connect(timer, SIGNAL(timeout()), painter, SLOT(update()));
    timer->start(10);

四、实现效果