文档章节

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

尘中远
 尘中远
发布于 2016/05/12 23:53
字数 1224
阅读 1K
收藏 1

「深度学习福利」大神带你进阶工程师,立即查看>>>

在工控监测领域,经常需要动态绘制曲线,观察曲线的变化趋势,绘制波形图,绘制频谱等。在前面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版

尘中远
粉丝 2
博文 26
码字总数 47436
作品 0
朝阳
程序员
私信 提问
加载中
请先登录后再评论。
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
693
1
【opencv】图形的绘制

1.矩形图像的绘制: 原函数:void cvRectangle(CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8,int shift=0) img就是需要绘制的图像 pt1 and pt......

其实我是兔子
2014/10/08
1.2K
1
NSSplitView 扩展--DMSplitView

DMSplitView 对标准的 OS X 的 NSSplitView 控件进行改造,可满足更复杂的要求: 子视图的大小和约束 分隔条位置 可收缩伸展的子视图 动画变换效果 可控制分隔条的粗细和样式 可保存和恢复分...

匿名
2013/01/24
368
0
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.3K
1
实时分析系统--istatd

istatd是IMVU公司工程师开发的一款优秀的实时分析系统,能够有效地收集,存储和搜索各种分析指标,类似cacti,Graphite,Zabbix等系统。实际上,istatd修改了Graphite的存储后端,重新实现了...

匿名
2013/02/07
3K
1

没有更多内容

加载失败,请刷新页面

加载更多

C#中const和readonly有什么区别? - What is the difference between const and readonly in C#?

问题: What is the difference between const and readonly in C#? C#中const和readonly什么区别? When would you use one over the other? 您什么时候可以使用另一个? 解决方案: 参考一...

fyin1314
33分钟前
25
0
百度地图SDK新版内测邀请

本文作者:用****9 百度地图开放平台为开发者提供七大基础服务能力,其中地图SDK和导航SDK是开发者广泛使用的重要基础服务,为了满足开发者更多使用需求以及提升开发者集成后的应用效果,本次...

百度开发者中心
前天
13
0
获取JavaScript数组中的所有唯一值(删除重复项) - Get all unique values in a JavaScript array (remove duplicates)

问题: I have an array of numbers that I need to make sure are unique. 我需要确定一个唯一的数字数组。 I found the code snippet below on the internet and it works great until th......

javail
今天
11
0
如何检查字符串是否为空? - How to check if the string is empty?

问题: Does Python have something like an empty string variable where you can do: Python是否有类似空字符串变量的内容可以在其中执行: if myString == string.empty: Regardless, wh......

富含淀粉
今天
19
0
您如何存储未跟踪的文件? - How do you stash an untracked file?

问题: I have changes to a file, plus a new file, and would like to use git stash to put them away while I switch to another task. 我对一个文件进行了更改,再加上一个新文件,并希......

技术盛宴
今天
39
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部