广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Qt中PaintEvent绘制实时波形图的实现示例
  • 372
分享到

Qt中PaintEvent绘制实时波形图的实现示例

2024-04-02 19:04:59 372人浏览 安东尼
摘要

目录绘制思路1:接收硬件传入的数据2:定时器动态刷新页面3:真实数据处理第一步:每进行一次数据更新,都需要剔除超时显示数据。第二步:筛查有效数据,并记录4:图形绘制上一篇文章讲述了如

上一篇文章讲述了如何使用控件进行波形图绘制,虽然很方便,但是也有一些无法避免的问题,比如说:动态绘制图形时,想要流畅的进行波动,就必须按照特定的时间实时更换数据。

接来下,我们采用在paintEvent中绘制的方式进行实时波形图绘制,首先,我们先展示下显示效果吧!

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

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

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

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

那么,我们该如何使用paintEvent实时绘制出波形图呢?接下来就来讲解下我的思路吧,如果觉得我的思路比较繁琐,大家也可以提出来,我也学习下,弥补下自己的不足。

绘制思路

1:接收硬件传入的数据

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

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

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

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

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

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容器中呢?

思路:

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

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

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

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

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

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

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绘制图形时,就会出现以下效果:

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

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

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

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

到此这篇关于Qt中PaintEvent绘制实时波形图的实现示例的文章就介绍到这了,更多相关Qt PaintEvent绘制实时波形图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Qt中PaintEvent绘制实时波形图的实现示例

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Qt中PaintEvent绘制实时波形图的实现示例
    目录绘制思路1:接收硬件传入的数据2:定时器动态刷新页面3:真实数据处理第一步:每进行一次数据更新,都需要剔除超时显示数据。第二步:筛查有效数据,并记录4:图形绘制上一篇文章讲述了如...
    99+
    2022-11-13
  • Qt中怎么使用PaintEvent绘制实时波形图
    本文小编为大家详细介绍“Qt中怎么使用PaintEvent绘制实时波形图”,内容详细,步骤清晰,细节处理妥当,希望这篇“Qt中怎么使用PaintEvent绘制实时波形图”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-06-30
  • Qt利用QChart实现实时波形图的绘制
    目录前言1.QChart配置以及使用1.1QChart环境配置1.2控件使用1.3代码配置2.QChat设置动态折线图2.1基础数据设置2.2定时器控制数据变动3.实际硬件数据采集图...
    99+
    2022-11-13
  • Qt实现实时鼠标绘制图形
    目录功能实现1:记录图形第一个绘制点2:实时获取鼠标最新位置并绘图3:释放绘制点,绘制最终图形总结上一章节介绍了关于QGraphicsView的基础讲解,以及简单的类图创建,由上一章...
    99+
    2022-11-13
  • Qt如何实现实时鼠标绘制图形
    小编给大家分享一下Qt如何实现实时鼠标绘制图形,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!展示效果功能实现想要实现鼠标拖拽绘图的效果,离不开鼠标的三大事件:按下、移动、释放那么具体实现实时绘制矩形框的核心流程是什么呢?鼠...
    99+
    2023-06-29
  • wavesurfer.js绘制音频波形图的实现
    1.查看效果图 向前选中: 向后选中: 代码如下(示例): <template> <div class="waveSurfer"> <d...
    99+
    2022-11-12
  • QT+OpenGL实现简单图形的绘制
    继承于QOpenGLWindow,描画出来。新建类myopengl,头文件如下: #ifndef MYOPENGL_H #define MYOPENGL_H #include &...
    99+
    2022-12-28
    QT OpenGL绘制图形 QT 绘制图形 OpenGL绘制图形 QT OpenGL
  • WPF实现绘制3D图形的示例代码
    目录关键概念视口相机光源材质3D对象命中测试(鼠标交互)3D对象中2D控件渲染外部导入3D模型WPF的3D功能可以在不编写任何c#代码的情况下进行绘制,只需要使用xaml即可完成3D...
    99+
    2023-03-02
    WPF绘制3D图形 WPF 3D图形 WPF 3D
  • Python实现动态条形图绘制的示例代码
    目录动态条形图变动态柱状图指定排序方式限制条目数设置固定条目固定数值轴,使其不发生动态变化设置图像帧数,默认 10 帧设置帧率,单位时间默认为 500ms设置每帧增加的标签时间,默认...
    99+
    2022-11-11
  • WPF实现绘制扇形统计图的示例代码
    扇形统计图 绘制一个扇形原理也是基于Canvas进行绘制;ArcSegment[1]绘制弧形;绘制指示线;绘制文本;鼠标移入动画;显示详情Popup;源码Github[2] ...
    99+
    2022-11-13
  • Qt实现绘制网格背景的示例代码
    目录现有功能运行结果源码window.hwindow.cppmain.cpp现有功能 使用滚轮缩放。缩放到达一定阈值后恢复网格大小。窗口大小调整时网格背景也自动调整重绘。 运行结果 ...
    99+
    2022-11-13
  • Android实现绘制LocationMarkerView图的示例代码
    目录LocationMarkerView图的绘制绘制整公里的文字添加动画LocationMarker是运动轨迹上Start、End, 以及整公里点上笔者自定义绘制的一个MarkerV...
    99+
    2023-02-10
    Android绘制LocationMarkerView图 Android LocationMarkerView图 Android LocationMarkerView
  • R绘制漂亮的中国地图的实现示例
    目录ggmapmaps + mapdataggplot2 + mapdataggrepelggmap 说起用R绘制中国地图,很多有经验的老司机肯定会推荐ggmap,无论是里面自带的各...
    99+
    2022-11-12
  • Python实现甘特图绘制的示例详解
    目录前期准备页面的结构代码部分主页面的开发-Section 1主页页面的开发-Section 2相信大家在平常实际工作当中,需要对整体的项目做一个梳理,这时如果有一个网页应用能够对整...
    99+
    2023-05-15
    Python绘制甘特图 Python甘特图
  • Python绘制多因子柱状图的实现示例
    目录背景介绍软件介绍绘图教程最后背景介绍 R和Python作为两个开源、且容易上手的数据分析和绘图工具,在科研中应用的比较广泛。 在接下来的日子,我们围绕Python进行绘图和数据分...
    99+
    2022-11-11
  • Pythonpyecharts实现绘制中国地图的实例详解
    目录实例演示1.pyecharts 1.9.1 版本安装与数据准备2.添加数据项,默认中国地图显示常用配置项及参数解析1.设置是否默认选中2.设置地图颜色类型是否分段显示3.缩放平移...
    99+
    2022-11-12
  • Matlab实现四种HSV色轮图绘制的示例代码
    前言 有粉丝问我图(d)上的色盘图咋画: 明度(V)渐变版 注意,此处是为了还原论文中图片所以X加了。 % 生成网格 tList=linspace(0,2.*pi,300...
    99+
    2022-11-13
  • Python pyecharts实现绘制中国地图的实例分析
    这篇文章主要为大家分析了Python pyecharts实现绘制中国地图的实例分析的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“Python&nb...
    99+
    2023-06-26
  • 基于Echarts实现绘制立体柱状图的示例代码
    目录前言实现方法先写一个常规的柱状图echarts的配置选项效果图前言 大家好,我是梁木由。之前在做大屏可视化项目时,UI设计了一个立体形状的柱状图,根据之前做的一些图表的项目没有能...
    99+
    2023-02-23
    Echarts绘制立体柱状图 Echarts立体柱状图 Echarts柱状图
  • Python实现绘制Matlab格式的地图边框的示例代码
    目录1、Python绘制色斑图2、Python绘制比例尺、指南针3、Python绘制Matlab格式的地图边框1、Python绘制色斑图 import matplotlib.pyp...
    99+
    2022-11-11
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作