在工控監(jiān)測領域，經常需要動態(tài)繪制曲線，觀察曲線的變化趨勢，繪制波形圖，繪制頻譜等。在前面4講中介紹了MFC經常用的TeeChart控件和Hight-Speed Chart?Ctrl，這兩個都是MFC繪圖控件的經典（另外，在Qt中還有QwtPlot和QCustomPlot兩大神器）。許多人問如何繪制動態(tài)變化的曲線，為此專門寫下這篇文章。

C++ GUI 繪圖控件目錄

MFC（VC）

VS2010 使用TeeChart繪圖控件 - 之一 - 控件和類的導入VS2010 使用TeeChart繪圖控件 - 之二 - 繪制圖形（折線圖，柱狀圖）TeeChart繪圖控件 - 之三 - 提高繪圖的效率MFC下好用的高速繪圖控件-(Hight-Speed Charting)繪制動態(tài)曲線

Qt

qt超強精美繪圖控件 - QCustomPlot一覽qt超強繪圖控件qwt - 安裝及配置

對于任何繪圖控件，都可以實現(xiàn)動態(tài)繪圖，其原則是：控件只負責繪圖，若想曲線動，就讓數據動，就像看電影一樣，電影是由一幀一幀的靜態(tài)圖片組合起來的，在一定速度上刷新，靜態(tài)圖片就能動起來；和電影的原理一樣，繪圖控件能顯示靜態(tài)的曲線，想要它動起來，就讓它頻在一定時間刷新就可以了。

這就是動態(tài)繪圖的實現(xiàn)原理。

實現(xiàn)動態(tài)曲線需要以下兩個準備：

計時器Timer數組左移

基于Timer的繪圖

任何界面庫都會有Timer這個實現(xiàn)，在MFC中時OnTimer消息，在Qt中是QTimer類，那種原理基本都一樣，下面將以MFC(VC)為例進行說明。

Timer是消息級別最低的消息，它會保證其它級別高的消息優(yōu)先執(zhí)行，因此，就算數據大量刷新，也不會影響主線程的其它消息。

MFC生成OnTimer消息，消息響應函數如下：

void?CTeeChartDlg::OnTimer(UINT_PTR?nIDEvent)
{
	//?TODO:?在此添加消息處理程序代碼或調用默認值
	CDialogEx::OnTimer(nIDEvent);
}

繪圖的實現(xiàn)就在這個消息響應函數里

如果讓定時器設定為1秒觸發(fā)，每一秒把舊數據去除，繪制新數據，就能看到不停變換的波形；對于趨勢圖，假如每秒有一個新數據，那么就在定長數組中，把數組所有數據整體左移，同時數組末端加入新數據。代碼如下：

///?
///?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;
}

此函數把整個數組左移，然后新數據放置在數組最末端（右端）。

這樣，數組就實現(xiàn)“向左運動”，把左移后的數組繪制，就能在繪圖控件上發(fā)現(xiàn)其變化。

下面開始實現(xiàn)動態(tài)繪圖（這里演示TeeChart的方法，附件里有HightSpeed-Chart CChartCtrl的方法）：

void?CTeeChartDlg::OnBnClickedButtonRuning()
{
	KillTimer(0);
	ZeroMemory(&m_TeeChartArray,sizeof(double)*m_c_arrayLength);
	for?(size_t?i=0;iClearSerie();
	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中的實現(xiàn)如下：

void?CTeeChartDlg::OnTimer(UINT_PTR?nIDEvent)
{
	//?TODO:?在此添加消息處理程序代碼和/或調用默認值
	if(0?==?nIDEvent)
	{
		++m_count;
		drawMoving();
	}
	CDialogEx::OnTimer(nIDEvent);
}

drawMoving函數用于繪圖，timer設定為1秒觸發(fā)一次，這時就能看到每秒的變化，如果數據是以1秒為刷新周期，每一秒有個新數據，只需要把舊的數據向左移，新數據放到數組最右端，再在繪圖控件上把此圖形畫出來即可看的像動一樣。

drawMoving函數的實現(xiàn)如下：

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是優(yōu)先級最低的消息，如果想曲線動的流暢，可以把時鐘設置為0ms，如

SetTimer(0,0,NULL);	

這時會在保證界面流暢的前提下，以最高頻率刷新。這樣看到的圖形會非常流暢。

上面介紹的就是動態(tài)繪制曲線的思路和方法，附件中有用TeeChart實現(xiàn)和HightSpeedChart實現(xiàn)的例子，考慮到可能有些人沒有安裝TeeChart，專門把TeeChart分離出來了一個源碼，只有HightSpeedChart，不需要安裝任何控件。

demo1：

MFC下TeeChart和HightSpeedChart動態(tài)繪制曲線圖-VS2010

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

MFC動態(tài)繪制曲線圖-HightSpeedChart實現(xiàn)