【Qt绘制仪表盘】

目的

使用Qt的绘制事件绘制一个仪表盘

思路

  1. 需要创建一个带绘制事件的控件
  2. 重写绘制事件
  3. 显示

实现

以下是实现代码,可复制到程序到,直接运行。

.h
// GaugeWidget.h
#ifndef GAUGEWIDGET_H
#define GAUGEWIDGET_H

#include 

class GaugeWidget : public QWidget
{
    Q_OBJECT
public:
    explicit GaugeWidget(QWidget *parent = nullptr);

    void setValue(qreal value){m_value = value;}

protected:
    void paintEvent(QPaintEvent *event) override;

private:
    qreal m_value;
};

#endif // GAUGEWIDGET_H

.h分析
  • 继承QWidget类,重新实现void paintEvent(QPaintEvent *event) override;事件;
  • 设置仪表盘当前的数据void setValue(qreal value){m_value = value;}
.cpp
// GaugeWidget.cpp
#include "GaugeWidget.h"
#include 

#include 
GaugeWidget::GaugeWidget(QWidget *parent) : QWidget(parent), m_value(0)
{

}

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

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    qDebug().noquote() << "[" << __FILE__ << __LINE__ << "]" << this->size();
    // 绘制表盘
    painter.save();
    painter.translate(width()/2, height()/2);
    painter.setPen(Qt::NoPen);
    painter.setBrush(QBrush(QColor(255, 255, 255)));
    painter.drawEllipse(-100, -100, 200, 200);
    painter.setBrush(QBrush(QColor(200, 200, 200)));
    painter.drawEllipse(-95, -95, 190, 190);

    static const int majorTickCount = 12;
    static const int minorTickCount = 5;

    QFont font;
    font.setPointSize(8);
    painter.setFont(font);

    painter.save();
    for (int i = 0; i <= majorTickCount; i++) {
        qreal angle = i * 360.0 / majorTickCount;
        painter.rotate(angle);

        // 绘制刻度线
        if (i < majorTickCount) {
            painter.setPen(QPen(QColor(255, 255, 255), 2));
            painter.drawLine(0, -85, 0, -95);
        }

        // 绘制刻度值
        if (i % 2 == 0) {
            painter.setPen(QPen(QColor(255, 0, 0)));
            qreal value = i * 360.0 / majorTickCount;
            QString text = QString::number(value, 'f', 0);
            QRectF textRect(-50, -100, 100, 100);
            painter.drawText(textRect, Qt::AlignTop|Qt::AlignHCenter, text);
        }

        painter.rotate(-angle);
    }

    for (int i = 0; i < majorTickCount; i++) {
        for (int j = 1; j <= minorTickCount; j++) {
            qreal angle = (i + j / (qreal)minorTickCount) * 360.0 / majorTickCount;
            painter.save();
            painter.rotate(angle);

            painter.setPen(QPen(QColor(255, 255, 255), 1));
            painter.drawLine(0, -90, 0, -95);

            painter.restore();
        }
    }
    painter.restore();

    // 绘制指针
    qreal angle = (m_value / 60.0+0.5) * 360;
    painter.rotate(angle);
    painter.setPen(QPen(QColor(255, 0, 0), 3));
    painter.drawLine(0, 0, 0, 60);
    painter.restore();
}
.cpp分析

paintEvent函数是继承自QWidget的paintEvent事件处理函数,用于绘制小部件的界面。paintEvent函数首先创建一个QPainter对象,然后设置抗锯齿渲染。其余部分主要是绘制仪表盘和指针。具体绘制过程如下:

  1. 绘制表盘:
  • 将绘图原点平移到小部件的中心。

  • 绘制外圆和内圆,用QBrush用来填充圆形。

  • 根据majorTickCount(12)的值循环绘制刻度线和刻度值。每次循环需要计算出角度,然后将绘图原点旋转该角度。

  • 如果当前是大刻度线,则用QPen绘制白色线条。

  • 如果当前是大刻度线的偶数,则用QPen绘制红色刻度值,绘制完成后将绘图原点旋转回来。

  • 根据majorTickCount(12)和minorTickCount(5)的值循环绘制小刻度线。每次循环需要计算出角度,然后将绘图原点旋转该角度,绘制小刻度线,然后将绘图原点旋转回来。

  1. 绘制指针:
  • 根据m_value的值计算出指针应该指向的角度,并将绘图原点旋转该角度。
  • 用QPen绘制红色的指针线。
  • 将绘图原点旋转回来。
在MainWindow中使用自定义控件类GaugeWidget,测试表盘绘制效果:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "GaugeWidget.h"

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

    GaugeWidget *gaugeWidget = new GaugeWidget;
    setCentralWidget(gaugeWidget);
    gaugeWidget->setValue(40);
}

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

编译运行程序,效果如下:

【Qt绘制仪表盘】_第1张图片

结论

繁华到极致,腐朽到荒凉

你可能感兴趣的:(Qt记录,qt,开发语言)