返回顶部
首页 > 资讯 > 精选 >Qt中怎么使用PaintEvent绘制实时波形图
  • 910
分享到

Qt中怎么使用PaintEvent绘制实时波形图

2023-06-30 23:06:39 910人浏览 独家记忆
摘要

本文小编为大家详细介绍“Qt中怎么使用PaintEvent绘制实时波形图”,内容详细,步骤清晰,细节处理妥当,希望这篇“Qt中怎么使用PaintEvent绘制实时波形图”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧

本文小编为大家详细介绍“Qt中怎么使用PaintEvent绘制实时波形图”,内容详细,步骤清晰,细节处理妥当,希望这篇“Qt中怎么使用PaintEvent绘制实时波形图”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

数据来源依旧是硬件传入的实时数据,如下:

[0, 3, 5, 8, 10, 13, 15, 18, 20, 23, 25, 28, 26, 23, 20, 16, 13, 11, 9, 6, 4, 3, 0]

其实有些人看到这里会说,数据都有了直接画出来不就可以了吗?

在我们实际应用过程中,这些硬件上传的数据不是一次性传出的,而是取决于你操作硬件的频率以及事件决定的。所以说,想要一次性拿出一整条数据来绘制,这个时机已经晚了。

绘制思路

1:接收硬件传入的数据

这里使用了SetRealTimeDepthData(stDepthData stData);意思是:设置实时深度数据值。

参数穿入的是一个结构体,在使用这个函数之前我已经将数据做了简单的处理,包括了深度方向设置。

比如:当深度逐渐变大时,深度方向div是正数,当深度逐渐减小时,深度方向div是负数。

下面,我展示下我实际处理后的数据值

Qt中怎么使用PaintEvent绘制实时波形图

对于这些真实数据我设定了一个结构体,用于存储数据时间、深度方向以及具体深度值

struct DrawingEffectivePress{    int nDiv; //深度方向    int nDepth; //深度值    DWord dwTime; //记录当前真实数据的时间    DrawingEffectivePress():nDiv(0),nDepth(0),dwTime(0){}}

SetRealTimeDepthData具体实现,如下:

void QDrawingWavefORM::SetRealTimeDepthData(stDepthData stData){    std::lock_guard<std::mutex> lck(m_dataMutex); //加进行数据操作    DrawingEffectivePress stDepth;    stDepth.nDiv = stData.nDiv>=0?1:-1;    stDepth.nDepth = stData.nDepth;    stDepth.dwTime = GetTickCont();    m_vetDepth.push_back(stDepth);}

代码讲解:

有上述图片的真实数据来看,深度的方位是逐渐递增的,那么在程序中我们采用了1和-1的方式表示,正方向时都是用1来表示,负方向时都是用-1来表示。

每有一条真实数据时,都需要记录当前真实数据的具体时间,用于绘制实时的动态走向。

2:定时器动态刷新页面

设定定时器每40毫秒刷新一次页面:

#define TimeInterval 40 //定时器时间间隔

定时器启动 m_nTimerId = startTimer(TimeInterval);

3:真实数据处理

这是我们绘制的一个重点,也是比较麻烦的一部分了。

与硬件打过交道的友友们都知道,硬件数据的不稳定性,有些时候看着数据的走向是朝下的,因为手动操作缘故,偶尔会有一些浮动的数据,这些数据需要筛除,在传入数据之前我已经做了处理,这个问题在这篇文章中是不存在的。

使用m_vetDepth存储了实际的深度数据值。

std::vector<DrawingEffectivePress> m_vetDepth;
第一步:每进行一次数据更新,都需要剔除超时显示数据。

什么叫做超时显示数据?

根据文章一开篇的动画可以看出,波形图一边进行绘制操作,一边向左移动。

在移动过程中,肯定会移出左边界,那么也就代表了当前的图形不需要展示。对此,我们就需要在每次更新数据时,判断有哪些数据是已经超过显示范围的,需要进行剔除了。

那么,到这里也就遇到了另外一个问题,我们剔除的数据是在m_vetDepth中存储的数据吗?

答案是的,但是为了逻辑简单操作,我们需要重新定义一个结构体,当前结构体主要用来做已经绘制成图形的点的记录。

std::vector<DrawingEffectivePress> m_vetEffectiveDepth;

在当前容器中存储的数据一定是具体特定标识的,也就是波形图的拐点数据,一个完整波形的最低点以及最高点。

当我们进行实际绘图时,也是取m_vetEffectiveDepth中的数据,保证了数据逻辑简单性。

现在,我们先来看一看剔除超时数据的实际代码,如下:

void QDrawingWaveform::DeletingTimeoutData(){    DWORD dwCurrentTime = GetTickCount(); //当前时间    std::vector<DrawingEffectivePress>::iterator itvet = m_vetEffectivePress.begin();    for (itvet; itvet != m_vetEffectivePress.end();)    {DrawingEffectivePress stPoint = *itvet;if ((dwCurrentTime - stPoint.dwPressTime) > m_nSingShowTime){            //超过界面展示范围,剔除数据            itvet = m_vetEffectivePress.erase(itvet++);}else            itvet++;    }}

代码解析:实时获取最新时间,每次都判断存储的硬件操作时间与设定的最大值(m_nSingShowTime)进行比较。

当超过设定的时间时,说明图形已经消失在界面上了,就需要剔除数据。

第二步:筛查有效数据,并记录

上一步骤是剔除超时数据,那么我们该如何存储这些有效数据到m_vetEffectivePress容器中呢?

思路:

默认容器中存储前两条数据。

当后续数据来时,需要与上一条数据进行判别。

如果方向一致,说明深度一直在递增或者是递减,直接替换最后一会有效数据的值即可。

如果方向不一致,说明深度值发生了变换,可能由向下变成了向上;也可能由向上变成了向下。不再做数据替换操作,而是插入一条新数据。

操作一条数据后,进行数据删除。

将上述思路转变成代码,如下:

std::vector<DrawingEffectivePress>::iterator itvet = m_vetPress.begin()for (itvet; itvet != m_vetPress.end(); ){DrawingEffectivePress stPoint = *itvet;DrawingEffectivePress stPress;stPress.dwTime = stPoint.dwTime;stPress.nDiv = stPoint.nDiv;stPress.nDepth = stPoint.nDepth;int nsize = m_vetEffectivePress.size();if (nsize < 2){m_vetEffectivePress.push_back(stPress);}else {            //如果当前数据stPoint与m_vetEffectivePress的最后一位的拐点一致,            //剔除掉m_vetEffectivePress的最后一位,存储成最新数据            if (m_vetEffectivePress[nsize - 1].nDiv == stPoint.nDiv)            {                    //更新m_vetEffectivePress的最后一位                    m_vetEffectivePress[nsize - 1] = stPress;            }            else            {                    //存储的最后一位的拐点与当前数值不一致时,直接存储                    m_vetEffectivePress.push_back(stPress);                                     }}itvet = m_vetPress.erase(itvet++);}

4:图形绘制

经过上述数据处理后,我们可以直接在panitEvent中直接绘制出m_vetEffectivePress图形了。

实际代码效果如下:

QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing); //抗锯齿QPolyGon polygon;for (int i = 0; i < m_vetEffectivePress.size(); i++){DrawingEffectivePress stPoint = m_vetEffectivePress[i];int nX = this->CalcRealPointX(stPoint.dwPressTime);int nY = this->CalcRealPointY(stPoint.nDepth);polygon << QPoint(nX, nY);}painter.drawPolyline(polygon);

代码解析:根据实际数据的操作时间以及具体的深度值,可以确定波形图的x轴与y轴了。

根据时间的变化,就可以让图形看起来是一种动起来的效果。

CalcRealPointX实际处理

//TODO:计算,实际的x轴坐标DWORD dwCurrent = GetTickCount();int nRectRight = rect().right();int nMoveOriginal = dwDepthTime - dwCurrent;double dMoveLen = nMoveOriginal / 8;int nX = nRectRight + dMoveLen;return nX;

代码解析:实时获取当前绘制时间,并减去结构体中存储的深度时间,设置移动长度(dwMoveOriginal)。

因为要向左偏移,所以,每次用窗口的右侧区域减去就可以了。

注意:我这里使用的是"+",因为我计算得出的偏移长度一定是一个负值。实时时间一定会比实际深度时间大,所以结果肯定是一个负值。

到这里,我们的实时图形绘制算是完成了80%了,想要绘制出连续的实时深度值图形就可以实现了。

为什么说是80%呢?

因为还有一个我们需要考虑的问题,当不是连续数据获取时,使用QPolygon绘制图形时,就会出现以下效果:

Qt中怎么使用PaintEvent绘制实时波形图

当我们不是连续绘制深度值时,间隔一定时间后,再进行绘图时,就会出现上述红色区域框出来的诡异现象。

按照实际应用的绘制效果就应该如同文章刚开始的效果一样,间隔一定时间后,再次绘制,应该还是一条完整的波形数据。

QPolygon这个绘制类显然使用上述代码是不支持的,即使我们换成了DrawLine的方式,这个问题还是需要被解决的。

此时,我们就需要做一个特殊处理,当我们没有实际深度值数据时,需要实时知道当前的绘制点在哪个位置,也就是说,在没有真实数据来临之前,我们需要每间隔一个绘图数据刷新时间,需要绘制一条直线,而不是直接从上一个绘制点直接绘制波形图。

读到这里,这篇“Qt中怎么使用PaintEvent绘制实时波形图”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网精选频道。

--结束END--

本文标题: Qt中怎么使用PaintEvent绘制实时波形图

本文链接: https://lsjlt.com/news/331980.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Qt中怎么使用PaintEvent绘制实时波形图
    本文小编为大家详细介绍“Qt中怎么使用PaintEvent绘制实时波形图”,内容详细,步骤清晰,细节处理妥当,希望这篇“Qt中怎么使用PaintEvent绘制实时波形图”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-06-30
  • Qt中PaintEvent绘制实时波形图的实现示例
    目录绘制思路1:接收硬件传入的数据2:定时器动态刷新页面3:真实数据处理第一步:每进行一次数据更新,都需要剔除超时显示数据。第二步:筛查有效数据,并记录4:图形绘制上一篇文章讲述了如...
    99+
    2024-04-02
  • Qt利用QChart实现实时波形图的绘制
    目录前言1.QChart配置以及使用1.1QChart环境配置1.2控件使用1.3代码配置2.QChat设置动态折线图2.1基础数据设置2.2定时器控制数据变动3.实际硬件数据采集图...
    99+
    2024-04-02
  • PyQt5使用pyqtgraph绘制波形图
    目录主程序代码UI界面设计控件提升UI设计文件UI生成文件运行效果主程序代码 import sys import numpy as np from PyQt5.QtGui impor...
    99+
    2023-01-13
    PyQt5 pyqtgraph绘制波形图 PyQt5 pyqtgraph波形图 PyQt5 pyqtgraph
  • Qt实现实时鼠标绘制图形
    目录功能实现1:记录图形第一个绘制点2:实时获取鼠标最新位置并绘图3:释放绘制点,绘制最终图形总结上一章节介绍了关于QGraphicsView的基础讲解,以及简单的类图创建,由上一章...
    99+
    2024-04-02
  • Qt如何实现实时鼠标绘制图形
    小编给大家分享一下Qt如何实现实时鼠标绘制图形,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!展示效果功能实现想要实现鼠标拖拽绘图的效果,离不开鼠标的三大事件:按下、移动、释放那么具体实现实时绘制矩形框的核心流程是什么呢?鼠...
    99+
    2023-06-29
  • 怎么在python中使用opencv绘制图形
    这篇文章给大家介绍怎么在python中使用opencv绘制图形,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。实现方法1)画线段 cv.line在图片中绘制一段直线# 绘制线段# 参数1:图片#&nb...
    99+
    2023-06-14
  • Python中怎么使用Matplotlib库绘制图形
    这篇文章主要介绍“Python中怎么使用Matplotlib库绘制图形”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Python中怎么使用Matplotlib库绘制图形”文章能帮助大家解决问题。一、...
    99+
    2023-07-02
  • HTML5中怎么绘制图形
    本篇内容主要讲解“HTML5中怎么绘制图形”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5中怎么绘制图形”吧! HTML5中...
    99+
    2024-04-02
  • 怎么用Canvas绘制图形
    这篇文章主要讲解了“怎么用Canvas绘制图形”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用Canvas绘制图形”吧!   Canvas绘制图形 ...
    99+
    2024-04-02
  • 怎么使用Python Matplotlib绘制条形图
    今天小编给大家分享一下怎么使用Python Matplotlib绘制条形图的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一...
    99+
    2023-07-02
  • Python怎么使用pyecharts绘制箱形图
    这篇文章主要介绍“Python怎么使用pyecharts绘制箱形图”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Python怎么使用pyecharts绘制箱形图”文章能帮助大家解决问题。箱形图概念后...
    99+
    2023-07-02
  • 怎么使用Python+turtle绘制对称图形
    这篇文章主要介绍“怎么使用Python+turtle绘制对称图形”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用Python+turtle绘制对称图形”文章能帮助大家解决问题。1.图1第一个图...
    99+
    2023-07-02
  • 使用Python怎么绘制柱状图和条形图
    今天就跟大家聊聊有关使用Python怎么绘制柱状图和条形图,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。一、实验目的:掌握Python中柱状图、条形图绘图函数的使用利用上述绘图函数实...
    99+
    2023-06-15
  • 使用c++实现OpenCV绘制旋转矩形图形
    目录功能函数测试代码测试效果  功能函数 // 绘制旋转矩形 void DrawRotatedRect(cv::Mat mask,const cv::RotatedRe...
    99+
    2024-04-02
  • 怎么在Android中实现绘制各种图形
    怎么在Android中实现绘制各种图形?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。首先自定义一个View类,这个view类里面需要一个Paint对象来控制图形的属性,需要...
    99+
    2023-05-30
    android
  • 怎么用OpenCV绘制图形功能
    这篇文章主要介绍“怎么用OpenCV绘制图形功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么用OpenCV绘制图形功能”文章能帮助大家解决问题。1、绘制直线绘制直线函数是cv::line,函数...
    99+
    2023-06-26
  • 怎么用Pyecharts绘制常用的图形
    本文小编为大家详细介绍“怎么用Pyecharts绘制常用的图形”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么用Pyecharts绘制常用的图形”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.上下组合fro...
    99+
    2023-06-29
  • Python中如何使用Matplotlib库绘制图形
    目录前言一、简单的正弦函数与余弦函数二、进阶版正弦函数与余弦函数1.改变颜色与粗细2.设置图片边界3.设置记号4.设置记号的标签5.设置X,Y轴6.完整代码三、绘制简单的折线图总结前...
    99+
    2024-04-02
  • 如何在Android中使用shape 绘制图形
    这篇文章给大家介绍如何在Android中使用shape 绘制图形,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。shape/* * 线行 圆形 矩形/android:shape=&...
    99+
    2023-05-30
    android shape
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作