文档章节

绘图控件第五讲——绘制动态曲线

尘中远
 尘中远
发布于 2016/05/12 23:53
字数 1224
阅读 90
收藏 1
点赞 2
评论 0

在工控监测领域,经常需要动态绘制曲线,观察曲线的变化趋势,绘制波形图,绘制频谱等。在前面4讲中介绍了MFC经常用的TeeChart控件和Hight-Speed Chart Ctrl,这两个都是MFC绘图控件的经典(另外,在Qt中还有QwtPlotQCustomPlot两大神器)。许多人问如何绘制动态变化的曲线,为此专门写下这篇文章。


C++ GUI 绘图控件目录

MFC(VC)

Qt


















对于任何绘图控件,都可以实现动态绘图,其原则是:控件只负责绘图,若想曲线动,就让数据动,就像看电影一样,电影是由一帧一帧的静态图片组合起来的,在一定速度上刷新,静态图片就能动起来;和电影的原理一样,绘图控件能显示静态的曲线,想要它动起来,就让它频在一定时间刷新就可以了

这就是动态绘图的实现原理。

实现动态曲线需要以下两个准备:

  1. 计时器Timer
  2. 数组左移

基于Timer的绘图

任何界面库都会有Timer这个实现,在MFC中时OnTimer消息,在Qt中是QTimer类,那种原理基本都一样,下面将以MFC(VC)为例进行说明。

Timer是消息级别最低的消息,它会保证其它级别高的消息优先执行,因此,就算数据大量刷新,也不会影响主线程的其它消息。

MFC生成OnTimer消息,消息响应函数如下:

void CTeeChartDlg::OnTimer(UINT_PTR nIDEvent)
{
	// TODO: 在此添加消息处理程序代码或调用默认值
	CDialogEx::OnTimer(nIDEvent);
}

绘图的实现就在这个消息响应函数里

如果让定时器设定为1秒触发,每一秒把旧数据去除,绘制新数据,就能看到不停变换的波形;对于趋势图,假如每秒有一个新数据,那么就在定长数组中,把数组所有数据整体左移,同时数组末端加入新数据。代码如下:

/// 
/// \brief 左移数组
/// \param ptr 数组指针
/// \param data 新数值
///
void LeftMoveArray(double* ptr,size_t length,double data)
{
	for (size_t i=1;i<length;++i)
	{
		ptr[i-1] = ptr[i];
	}
	ptr[length-1] = data;
}
此函数把整个数组左移,然后新数据放置在数组最末端(右端)。

这样,数组就实现“向左运动”,把左移后的数组绘制,就能在绘图控件上发现其变化。

下面开始实现动态绘图(这里演示TeeChart的方法,附件里有HightSpeed-Chart CChartCtrl的方法):

void CTeeChartDlg::OnBnClickedButtonRuning()
{
	KillTimer(0);
	ZeroMemory(&m_TeeChartArray,sizeof(double)*m_c_arrayLength);
	for (size_t i=0;i<m_c_arrayLength;++i)
	{
		m_X[i] = i;
	}
	m_count = m_c_arrayLength;
	CSeries chart_T = (CSeries)m_Chart.Series(0);
	chart_T.Clear();
	m_pLineSerie->ClearSerie();
	SetTimer(0,1000,NULL);	
}
函数中几个成员变量的定义是:

double m_TeeChartArray[2096];
	double m_X[2096];
	unsigned int m_count;
	const size_t m_c_arrayLength = 2096;

m_TeeChartArray是需要绘制的数组的Y值,m_X是对应的x值,m_count是计数器,每绘制一次,个数加1,主要用于x轴

在timer中的实现如下:

void CTeeChartDlg::OnTimer(UINT_PTR nIDEvent)
{
	// TODO: 在此添加消息处理程序代码和/或调用默认值
	if(0 == nIDEvent)
	{
		++m_count;
		drawMoving();
	}
	CDialogEx::OnTimer(nIDEvent);
}

drawMoving函数用于绘图,timer设定为1秒触发一次,这时就能看到每秒的变化,如果数据是以1秒为刷新周期,每一秒有个新数据,只需要把旧的数据向左移,新数据放到数组最右端,再在绘图控件上把此图形画出来即可看的像动一样。

drawMoving函数的实现如下:

void CTeeChartDlg::drawMoving()
{
	CSeries chart_T = (CSeries)m_Chart.Series(0);
	chart_T.Clear();
	m_pLineSerie->ClearSerie();
	LeftMoveArray(m_TeeChartArray,m_c_arrayLength,randf(0,10));
	LeftMoveArray(m_X,m_c_arrayLength,m_count);
	DrawLine_TeeChart(m_X,m_TeeChartArray,m_c_arrayLength);
}

前面说过timer是优先级最低的消息,如果想曲线动的流畅,可以把时钟设置为0ms,如

SetTimer(0,0,NULL);
这时会在保证界面流畅的前提下,以最高频率刷新。这样看到的图形会非常流畅。

上面介绍的就是动态绘制曲线的思路和方法,附件中有用TeeChart实现和HightSpeedChart实现的例子,考虑到可能有些人没有安装TeeChart,专门把TeeChart分离出来了一个源码,只有HightSpeedChart,不需要安装任何控件。


demo1:

MFC下TeeChart和HightSpeedChart动态绘制曲线图-VS2010

demo2(不用安装任何控件):

MFC动态绘制曲线图-HightSpeedChart实现


推广

teechart应用技术详解——快速图表制作工具 VC++ MFC Extensions  by Example/J.E. Swanke C++ Primer Plus 第6版

© 著作权归作者所有

共有 人打赏支持
尘中远
粉丝 1
博文 26
码字总数 47436
作品 0
朝阳
程序员
Android自定义View之使用Path绘制手势轨迹和水波效果

先看下效果图: path.gif ripple.gif 绘制轨迹 绘制手指的轨迹主要是拦截View的onTouchEvent()方法,并根据手指的轨迹绘制path。path中有两种可以实现的方法 1、Path.lineTo(x,y)方法 这里面...

深情不及酒伴 ⋅ 2017/12/12 ⋅ 0

Android自定义控件三部曲文章索引

前言:在我从C++转到Android时,就被Android里炫彩斑斓的自定义控件深深折服,想知道如果想利用C++实现这些功能,那是相当困难的。从那时候起,我就想,等我学会了自定义控件,一定要写一篇系...

harvic880925 ⋅ 2016/11/25 ⋅ 0

疯狂iOS讲义之在内存中绘图

前面介绍的都是通过扩展UIView、重写drawRect:方法进行绘图,这种绘图方式是直接在UIView控件上绘制所有的图形——由于每次该控件显示出来时,drawRect:方法都会被调用,这意味着每次该控件显...

博文视点 ⋅ 2014/02/11 ⋅ 1

Android自定义控件三部曲文章索引

前言:在我从C++转到Android时,就被Android里炫彩斑斓的自定义控件深深折服,想知道如果想利用C++实现这些功能,那是相当困难的。从那时候起,我就想,等我学会了自定义控件,一定要写一篇系...

丁佳辉 ⋅ 2016/04/13 ⋅ 0

Android自定义波浪加载圆形进度条——(自定义控件 一)

自定义控件—— 波浪形状圆形进度加载 时间管理的基础是精力管理,精力的高低、正负分影响到我们的效率 而时间是无法管理的,能够管理的只有自己,透过管理自己的习惯,管理自己的事件来达成...

赵子龙 ⋅ 2016/08/11 ⋅ 0

自定义控件三部曲之绘图篇(十五)——QQ红点拖动删除效果实现(基本原理篇)

前言:世人总是恐惧失败,但失败了也大不从头再来 相关系列文章: Android自定义控件三部曲文章索引:http://blog.csdn.net/harvic880925/article/details/50995268 前几篇给大家讲了有关绘图...

harvic880925 ⋅ 2016/06/08 ⋅ 0

几何画板制作贝塞尔曲线的方法

贝塞尔(Bezier)曲线又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋。贝塞尔曲线是计算机图形学中相当...

学术研究软件 ⋅ 2016/05/30 ⋅ 0

用几何画板参数如何构造动态解析式

几何画板提供丰富而方便的创造功能使用户可以随心所欲地编写出自己需要的教学课件,是最出色的教学软件之一。它主要以点、线、圆为基本元素,通过对这些基本元素的变换、构造、测算、计算、动...

学术研究软件 ⋅ 2016/04/11 ⋅ 0

gnuplot 让您的数据可视化

Gnuplot 是一种免费分发的绘图工具,可以移植到各种主流平台。它可以下列两种模式之一进行操作:当需要调整和修饰图表使其正常显示时,通过在 gnuplot 提示符中发出命令,可以在交互模式下操...

wdliming ⋅ 2011/11/27 ⋅ 0

Android自定义控件(一)自绘控件

由于公司项目的需求,需要绘制一条竖直的间断线作为分割线。这个可坑了爹了,以前只搞过水平的间断线,只要通过shape也可以简单的画出来,但是千万记得把hardwareAccelerated给关了,不然水平...

Jack_1900 ⋅ 2014/07/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea 整合 vue 启动

刚学习Vue 搭建了一个项目 只能命令启动 Idea里面不会启动 尝试了一下修改启动的配置 如下: 1.首先你要保证你的package.json没有修改过 具体原因没有看 因为我改了这个name的值 就没办法启动...

事儿爹 ⋅ 25分钟前 ⋅ 0

数据仓库技术概述(一看就是架构师写的,对我极其有用)

ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract)、交互转换(transform)、加载(load)至目的端的过程。ETL一词较常用在数据仓库,但其对象并不限于...

gulf ⋅ 27分钟前 ⋅ 0

redis在windows环境的后台运行方法

在后台运行,首先需要安装redis服务,命令为 redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动,命令为 redis-server --service-start 停止,命令为 redis-...

程序羊 ⋅ 29分钟前 ⋅ 0

比特币现金开发者提出新的交易订单规则

本周,四位比特币现金的四位开发者和研究员:Joannes Vermorel(Lokad),AmaurySéchet(比特币ABC),Shammah Chancellor(比特币ABC)和Tomas van der Wansem(Bitcrust)共同发表了一篇关...

lpy411 ⋅ 32分钟前 ⋅ 0

vue获取input输入框的数据

用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过...

王子城 ⋅ 34分钟前 ⋅ 0

竟然这就是面向对象的游戏设计?!

从程序角度考虑,许多 JavaScript 都基于循环和大量的 if/else 语句。在本文中,我们可了解一种更聪明的做法 — 在 JavaScript 游戏中使用面向对象来设计。本文将概述原型继承和使用 JavaSc...

柳猫 ⋅ 39分钟前 ⋅ 2

git cmd git bash

刚用到了Git,看到windows环境下有两个命令输入窗口 第一个是可视化图形界面,第二个是CMD,第三个是Bash。 Git中的Bash是基于CMD的,在CMD的基础上增添一些新的命令与功能。所以建议在使用的...

东东笔记 ⋅ 42分钟前 ⋅ 0

分布式系统CAP和Base

1、分布式系统 1.1 简介 由多台计算机和通信的软件组件通过计算机网络连接(本地网络或广域网)组成。分布式系统是建立在网络之上的软件系统。正是因为软件的特性,所以分布式系统具有高度的...

xixingzhe ⋅ 52分钟前 ⋅ 0

查看磁盘占用情况

记一次jenkins构建失败的问题 Build step 'Send build artifacts over SSH' changed build result to UNSTABLE 网上查资料都没明确表明是什么错,回忆之前处理这样的问题。第一时间想到的是不...

ManderSF ⋅ 54分钟前 ⋅ 0

数据库管理提速:SQL解析的探索与应用

前言: SQL解析是一项复杂的技术,一般都是由数据库厂商来掌握,当然也有公司专门提供SQL解析的API。SQL解析与优化是属于编译器范畴,和C语言等其他语言的解析没有本质的区别。其中分为词法分...

java高级架构牛人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部