【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.8 绘图事件

最新推荐文章于 2024-03-04 21:11:17 发布
最新推荐文章于 2024-03-04 21:11:17 发布
阅读量733 收藏 1
点赞数 4
分类专栏： 《QT开发笔记-基础篇》 文章标签： qt C++ 事件 无边框窗口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bili_mingwang/article/details/133940911
版权

本节对应的视频讲解：B_站_链_接

【QT开发笔记-基础篇】 第4章 事件 4.8 绘图事件(1)


本章要实现的整体效果如下：

整体效果

QEvent::Paint

​ 当窗口/控件需要重绘时，触发该事件，它对应的子类是 QPaintEvent

本节通过一个向 QLabel 上绘制高低温曲线的案例，来讲解绘图事件。

有两种实现方式：

  • 自定义标签控件，并重写 paintEvent()
  • 事件过滤器，直接绘制到标准 QLabel

本节采用事件过滤器的方法来实现。


1. 界面放置高低温标签

首先，在 paint-widget.h 中声明两个标签：

#include <QLabel>

class PaintWidget : public QWidget
{
private:
    QLabel* lblHigh;
    QLabel* lblLow;
};

然后，在 paint-widget.cpp 的构造中显示两个标签：

PaintWidget::PaintWidget(QWidget* parent) : QWidget{parent}
{
    QVBoxLayout* verticalLayout = new QVBoxLayout(this);
    verticalLayout->setSpacing(0);
    verticalLayout->setContentsMargins(0, 0, 0, 0);

    //添加一个Label，用于绘制高温曲线
    lblHigh = new QLabel(this);
    lblHigh->setText("");
    lblHigh->setFrameShape(QFrame::Box);
    verticalLayout->addWidget(lblHigh);

    //添加一个Label，用于绘制低温曲线
    lblLow = new QLabel(this);
    lblLow->setText("");
    lblLow->setFrameShape(QFrame::Box);
    verticalLayout->addWidget(lblLow);
}

此时，运行效果如下：

运行效果


2. 安装事件过滤器

在当前窗口中拦截两个标签的事件，就需要拦截发给标签的事件

首先，在 paint_widget.cpp 中为标签安装事件过滤器：

PaintWidget::PaintWidget(QWidget* parent) : QWidget{parent}
{
	// ...

    lblHigh->installEventFilter(this);
    lblLow->installEventFilter(this);
}

然后，在 paint_widget.h 中声明 eventFilter() 函数：

class PaintWidget : public QWidget
{
protected:
    bool eventFilter(QObject* watched, QEvent* event);
};

最后，在 paint_widget.cpp 中实现 eventFilter() 函数

bool PaintWidget::eventFilter(QObject* watched, QEvent* event)
{
    if ( event->type() == QEvent::Paint ) {
        if ( watched == lblHigh ) {
            //            paintHigh();  // 后边实现
            qDebug() << "paint lblHigh";
        }
        if ( watched == lblLow ) {
            //            paintLow();  // 后边实现
            qDebug() << "paint lblLow";
        }
    }
    return QWidget::eventFilter(watched, event);
}

具体流程：

  • 窗口刚出现时两个标签需要重绘，框架发送 QEvent::Paint 事件给标签
  • 事件被当前窗口拦截，进而调用其 eventFilter() 方法
  • 在 eventFilter()中，判断事件类型以及目标控件，来调用绘制高低温曲线的函数

3. 实现 paintHigh、paintLow

首先，在 paint_widget.h 中声明这两个函数，并声明两个数组，用来记录高温和低温

class PaintWidget : public QWidget
{
private:
    // 绘制高低温曲线
    void paintHigh();
    void paintLow();

private:
    int mHighTemp[7] = {0};
    int mLowTemp[7] = {0};
};

然后，在 paint_widget.cpp 中实现这两个函数

paintHigh() 实现如下：

#include <QPainter>

// 温度曲线相关的宏
#define PADDING       50
#define INCREMENT     8   // 温度曲线像素增量
#define POINT_RADIUS  4   // 曲线描点的大小
#define TEXT_OFFSET_X 12  // 温度文本相对于点的偏移
#define TEXT_OFFSET_Y 10  // 温度文本相对于点的偏移

void PaintWidget::paintHigh()
{
    QPainter painter(lblHigh);
    painter.setRenderHint(QPainter::Antialiasing, true);  // 抗锯齿

    // 1. 计算 x 轴坐标
    int pointX[7] = {0};
    for ( int i = 0; i < 7; i++ ) {
        pointX[i] = lblHigh->pos().x() + PADDING + (lblHigh->width() - PADDING * 2) / 6 * i;
    }

    // 2. 计算 y 轴坐标
    // 2.1 计算平均值
    int tempSum = 0;
    int tempAverage = 0;

    for ( int i = 0; i < 7; i++ ) {
        tempSum += mHighTemp[i];
    }

    tempAverage = tempSum / 7;  // 最高温平均值

    // 2.2 计算 y 轴坐标
    int pointY[7] = {0};
    int yCenter = lblHigh->height() / 2;
    int increment = lblHigh->height() / 20;
    for ( int i = 0; i < 7; i++ ) {
        pointY[i] = yCenter - ((mHighTemp[i] - tempAverage) * increment);
    }

    // 3. 开始绘制
    // 3.1 初始化画笔
    QPen pen = painter.pen();
    pen.setWidth(2);                  //设置画笔宽度为1
    pen.setColor(QColor(255, 0, 0));  //设置颜色

    painter.setPen(pen);
    painter.setBrush(QColor(255, 0, 0));  //设置画刷颜色
    painter.setFont(QFont("Microsoft YaHei", 14));

    // 3.2 画点、写文本
    for ( int i = 0; i < 7; i++ ) {
        painter.drawEllipse(QPoint(pointX[i], pointY[i]), POINT_RADIUS, POINT_RADIUS);
        painter.drawText(QPoint(pointX[i] - TEXT_OFFSET_X, pointY[i] - TEXT_OFFSET_Y), QString::number(mHighTemp[i]) + "°");
    }

    // 3.3 绘制曲线
    for ( int i = 0; i < 6; i++ ) {
        if ( i == 0 ) {
            pen.setStyle(Qt::DotLine);  //虚线
            painter.setPen(pen);
        } else {
            pen.setStyle(Qt::SolidLine);  // 实线
            painter.setPen(pen);
        }
        painter.drawLine(pointX[i], pointY[i], pointX[i + 1], pointY[i + 1]);
    }
}

paintLow() 实现如下：

void PaintWidget::paintLow()
{
    QPainter painter(lblLow);
    painter.setRenderHint(QPainter::Antialiasing, true);  // 抗锯齿

    // 1. 计算 x 轴坐标
    int pointX[7] = {0};
    for ( int i = 0; i < 7; i++ ) {
        pointX[i] = lblLow->pos().x() + PADDING + (lblLow->width() - PADDING * 2) / 6 * i;
    }

    // 2. 计算 y 轴坐标
    // 2.1 计算平均值
    int tempSum = 0;
    int tempAverage = 0;

    for ( int i = 0; i < 7; i++ ) {
        tempSum += mLowTemp[i];
    }

    tempAverage = tempSum / 7;  // 最高温平均值

    // 2.2 计算 y 轴坐标
    int pointY[7] = {0};
    int yCenter = lblLow->height() / 2;
    int increment = lblLow->height() / 20;
    for ( int i = 0; i < 7; i++ ) {
        pointY[i] = yCenter - ((mLowTemp[i] - tempAverage) * increment);
    }

    // 3. 开始绘制
    // 3.1 初始化画笔
    QPen pen = painter.pen();
    pen.setWidth(2);                  // 设置画笔宽度为1
    pen.setColor(QColor(0, 0, 255));  // 设置颜色

    painter.setPen(pen);
    painter.setBrush(QColor(0, 0, 255));  //设置画刷颜色
    painter.setFont(QFont("Microsoft YaHei", 14));

    // 3.2 画点、写文本
    for ( int i = 0; i < 7; i++ ) {
        painter.drawEllipse(QPoint(pointX[i], pointY[i]), POINT_RADIUS, POINT_RADIUS);
        painter.drawText(QPoint(pointX[i] - TEXT_OFFSET_X, pointY[i] - TEXT_OFFSET_Y), QString::number(mLowTemp[i]) + "°");
    }

    // 3.3 绘制曲线
    for ( int i = 0; i < 6; i++ ) {
        if ( i == 0 ) {
            pen.setStyle(Qt::DotLine);  //虚线
            painter.setPen(pen);

        } else {
            pen.setStyle(Qt::SolidLine);  // 实线
            painter.setPen(pen);
        }
        painter.drawLine(pointX[i], pointY[i], pointX[i + 1], pointY[i + 1]);
    }
}

此时，由于数组 mHighTemp 和 mLowTemp 数组的初始值都是 0 ，因此绘制出来的是 7 条水平直线的连接，如下：

此时效果


4. 产生随机温度

接下来，随机生成高温数组、低温数组

首先，在 paint_widget.h 中声明一个 updateTemp 的函数

class PaintWidget : public QWidget
{
private:
    // 更新高低温
    void updateTemp();
};

然后，在 paint_widget.cpp 中实现 updateTemp() 函数：

#include <QRandomGenerator64>

void PaintWidget::updateTemp()
{
    for ( int i = 0; i < 7; i++ ) {
        mHighTemp[i] = 20 + QRandomGenerator::global()->generate() % 10;
        mLowTemp[i] = -5 + QRandomGenerator::global()->generate() % 10;
    }

    lblHigh->update();
    lblLow->update();
}

最后，在 paint_widget.cpp 的构造中，手动调用 updateTemp() 函数：

PaintWidget::PaintWidget(QWidget* parent) : QWidget{parent}
{
    // ...

    updateTemp();

    lblHigh->installEventFilter(this);
    lblLow->installEventFilter(this);
}

此时，第一次运行后，就可以生成高低温曲线了，如下：

此时效果


5. 双击更新高低温曲线

在 eventFilter() 中，拦截鼠标双击事件，如下：

bool PaintWidget::eventFilter(QObject* watched, QEvent* event)
{
    if ( event->type() == QEvent::Paint ) {
        if ( watched == lblHigh ) {
            paintHigh();  // 后边实现
                          //            qDebug() << "paint lblHigh";
        }
        if ( watched == lblLow ) {
            paintLow();  // 后边实现
                         //            qDebug() << "paint lblLow";
        }
    } else if ( event->type() == QEvent::MouseButtonDblClick ) {
        updateTemp();
    }
    return QWidget::eventFilter(watched, event);
}

此时，每次双击鼠标，就可以刷新高低温曲线了，如下：

最终效果

此时整体调用流程：

  • 拦截标签的双击事件，调用 updateTemp() 函数
  • lblHigh->update() 表示要重绘标签，框架发送 QEvent::Paint 事件给标签
  • 事件被窗口拦截，进而调用其 eventFilter()
  • 在 eventFilter() 中，调用 paintHigh() 和 paintLow() 来真正在标签上绘制曲线
大轮明王讲QT
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
QT事件----QPaintEvent绘图事件，QwheelEvent鼠标滚轮事件等； 用事件自定义按键；QT事件过滤器。
m0_51430584的博客
05-30 202
使用自定义的按键mybutton,继承于QWidget,实现当鼠标进入时显示一张图片s1.png，当鼠标离开时显示另一张图片note.png，当点击鼠标按钮时会显示另外一张图片o1.png。首先定义一个C++类，名为mybutton。然后在mybutton.hQ_OBJECTpublic://检测鼠标离开事件//检测鼠标进入事件//重写绘图事件signals://将按键大小设置为图片大小update();//回调画图函数//鼠标点击事件update();//回调画图函数。
Qt中在QLabel上画点，重写QLabel类
qq_34445574的博客
08-11 1207
4.右键label控件，添加重写的类，将其提升为刚刚写好的类。1.首先新建一个类，让这个类继承QLabel。2.在类中对鼠标点击事件及绘图事件进行重写。3.然后在UI框架下添加label控件，QT中label进行绘图。
Qt重绘控件之移动信号
09-23
Qt+Vs控件重绘手机信号i的例子下载。具体可查看https://blog.csdn.net/automoblie0/article/details/101225592
Qt QPainter QPaintEvent 6.13
weixin_45241469的博客
06-14 311
重写绘图事件处理器，用于绘制图形。
QT关键问题解决之paintevent理解
QtCompany的博客
05-10 2536
通过立即调用paintEvent()来直接重新绘制窗口部件，如果erase为真，Qt在paintEvent()调用之前擦除区域 (x,y,w,h)。5.还要说明一下，在程序开始运行时就会自动发送重绘事件而调用paintEvent()函数，另外，不要在paintEvent()函数中调用update()或者repaint()函数。3.而调用repaint()函数会立即调用paintEvent()函数来重绘部件，只有在必须立即进行重绘操作的情况下（比如在动画中），才使用repaint()函数。
qt例程-分辨率修改事件.7z
07-16
在IT领域，尤其是在图形用户界面（GUI）开发中，Qt是一个非常重要的库，它提供了丰富的功能和工具，用于创建跨平台的应用程序。本压缩包"qt例程-分辨率修改事件.7z"聚焦于Qt中的一个关键概念：分辨率修改事件处理。...
qt例程-事件触发VSQtUseQmlUi.7z
07-16
3. 事件处理：事件接收者对象通过重载`QObject::event(QEvent *)`函数来处理事件，或者通过特定的事件槽（如`QPushButton::clicked()`）来响应特定类型的事件。 在QT例程中，我们经常看到使用信号和槽机制来处理...
第9章 Qt事件机制与原理
07-23
（1）在Qt中，事件被封装成一个个对象，所有的事件均继承自抽象类QEvent.  事件处理的核心包括事件①产生、②分发、③接受和处理 ①事件的产生 谁来产生事件？ 最容易想到的是我们的输入设备，比如键盘、鼠标产生...
Qt学习笔记之事件处理
01-08
1. Qt事件概述 事件是对各种应用程序需要知道的由应用程序内部或者外部产生的事情或者...Qt中定义的事件是一个从QEvent类继承而来的对象，它表示应用程序内部或外部发生了某些应用程序自身必须知道的事情。任何从QObjec
QT中 QEvent事件应用完整工程
12-30
QEvent事件机制是Qt框架中事件驱动模型的基础，允许程序响应并处理不同类型的事件。在本文中，我们将深入探讨QEvent事件的应用，并通过提供的项目实例来理解其工作原理。 首先，QEvent是Qt事件类的基类，它包含了...
qt重写paintEvent事件来设置背景图片
qq_72583325的博客
08-14 296
qt重写paintEvent事件来设置背景图片。
QT：通过按钮调用qpaintEvent事件实现自定义绘图
baltardX的博客
11-18 2896
最近碰到了一个需要在qt中完成二维图像变换的作业，想到刚接触qt时学过qpainter来进行绘画操作，立马就着手码起来；作为一个小白，马上就发现了相应的问题：由于qt内部机制，绘画事件（paintEvent）仅允许在绘画事件下进行（比如我想在某个按钮槽函数下绘画是错误的。查阅了论坛上大部分文章发现很少涉及这样的操作，并且涉及到的操作对于我这种小白来说也是比较难的。在一晚上的思考下，突然想起可以通过枚举来解决这问题，下面要介绍的就是通过枚举来实现自定义操作“画家的笔”。
qt学习：QPaintEvent绘图事件+QPainter画家
最新发布
weixin_59669309的博客
03-04 954
触发事件便会执行paintEvent(QPaintEvent *)，我们可以重写QWidget 的 paintEvent(QPaintEvent *) 方法来处理绘制逻辑。
Qt绘图事件实例：图集
qq_53704583的博客
07-31 81
Qt绘图事件实例：图集
Qt/绘画事件
m0_56654156的博客
03-03 363
【代码】Qt/绘画事件。
关于QT的Layout和Paint
luozirong的专栏
01-29 1329
本文不是想分析Qt源码的具体代码，一个是本人能力还没达到那个地步，而且着实没时间认真研究QT（因为你懂的Android。。。）,由于项目需要所以稍微了解了下QT的view体系。大概的将我了解到的要点罗列一下，这样子如果需要研究源码的时候就有方向（其实我也是怕自己忘记）。 QT的paint的过程是依赖事件驱动的。在需要渲染时触发QEvent::Paint事件。然后QObject及其继承类比如特别得
Qt5 paintEvent绘图事件
m0_73443478的博客
03-02 737
Qt5 paintEvent绘图事件
QT事件学习
05-02
自己看的一本QT学习资料，感觉内容比较好，有利于大家学习，内容主要分析QT事件问题。内容从浅到深，值得一看。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大轮明王讲QT

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值