Qt實現(xiàn)繪制多個設備的流量曲線圖詳解
一、說明
在實際項目中,主要是使用Qt開發(fā)CS程序,當然主要是客戶端。公司項目中有這個需求是實時顯示多個設備的流量曲線圖,設備將流量信息發(fā)給服務端,服務端再將信息通過Socket發(fā)給Qt客戶端,Qt客戶端通過Socket接收后實時顯示在程序的一個窗口上;這個顯示是以曲線圖的展示方式。
二、界面模型
接到這個功能需求后,使用的界面模型如下圖所示,圖示已經標示的很清楚了,我就不多詳細描述了:

三、功能分析
1、由于設備較多,超過100臺,所以不可能每個設備的流量曲線都用一種顏色,因此只選擇幾種比較明顯的顏色作為設備的流量曲線顏色,每次上來一個設備,就用其中的一種顏色繪制曲線。
2、使用QSS來設置部件的樣式信息,如前景、背景、被選擇時、鼠標移動時等等。
3、用一個部件用作專門的繪制部件,該部件放在窗口中,因此安裝事件過濾器,用于重繪子部件信息,繪制曲線圖。
4、處理設備上線/下線的網絡消息以及設備主動發(fā)送的動態(tài)流量信息;處理Qt客戶端與服務端的連接/斷開事件。
四、界面效果
開發(fā)出來的最終效果圖如下所示:
初始所有設備的流量圖如下圖

選擇設備名為a5的流量圖,其中a5設備的流量曲線加粗,背景半透明等效果如下圖

選擇設備名為a7的流量圖,其中a7設備的流量曲線加粗,背景半透明等效果如下圖

五、主要代碼
//消息過濾,主要用于重繪子控件,過濾Paint事件
bool QAPRTCurWidget::eventFilter(QObject *watched, QEvent *event)
{
if(watched==ui->widget_rxtx && event->type()==QEvent::Paint)
{
updateWidgetRTX();
}
return QFrame::eventFilter(watched,event);
}//繪圖操作
void QAPRTCurWidget::updateWidgetRTX()
{
QPainter painter(ui->widget_rxtx);
painter.setFont(QFont("Times", , QFont::Bold));
//繪制背景顏色
painterBackground(painter);
//畫最左邊一條虛線,用于和List隔開
painterLeftDashLine(painter);
//畫縱坐標文本標識
updateVTextID(painter);
//畫縱坐標文本刻度以及橫縱坐標軸
updateVTextMarkAndCoord(painter);
//畫RX曲線
paintRXLineInfo(painter);
//畫TX曲線
paintTXLineInfo(painter);
}//畫縱坐標文本刻度以及橫縱坐標軸
void QAPRTCurWidget::updateVTextMarkAndCoord(QPainter &painter)
{
painter.save();
//繪圖區(qū)間的實際高度(部件高度-頂部間隔-底部間隔)
int nActPaintHeight = ui->widget_rxtx->height()-INTERVAL_WIDGET_TOP-INTERVAL_WIDGET_BOTTOM;
//每隔的間隔高度
float fIntervalHeight = ((float)nActPaintHeight)/(m_nVSingleLinePointCount-);
float fYPointForZero = ui->widget_rxtx->height()-INTERVAL_WIDGET_BOTTOM;
double dDivideValue = ;
if(ui->toolButton_rxflow->isChecked())
{
dDivideValue = ((double)nRXMaxValue)/(m_nVSingleLinePointCount-);
}
if(ui->toolButton_txflow->isChecked())
{
dDivideValue = ((double)nTXMaxValue)/(m_nVSingleLinePointCount-);
}
for(int nIndex=;nIndex<m_nVSingleLinePointCount;++nIndex)
{
//設置文本顏色
painter.setPen(TEXTCOLOR_WIDGET_PAINT);
//將原來的字體變小,設置為8
QFont objFont = painter.font();
objFont.setPointSize();
painter.setFont(objFont);
//畫文本,加3的目的是為了是其和橫線能保持中間持平
painter.drawText(INTERVAL_VMARK_LEFT,fYPointForZero-nIndex*fIntervalHeight+,QCommonOP::getKMStrForBit(dDivideValue*nIndex));
//設置橫線顏色
painter.setPen(COORDCOLOR_WIDGET_PAINT);
//畫橫線(第一條和最后一條為實線,中間的為虛線)
QPen objPen = painter.pen();
if(==nIndex || (m_nVSingleLinePointCount-)==nIndex)
{
objPen.setStyle(Qt::SolidLine);
}
else
{
objPen.setStyle(Qt::DashLine);
}
painter.setPen(objPen);
float x1 = ui->widget_rxtx->width()-INTERVAL_WIDGET_RIGHT;
float y1 = fYPointForZero-nIndex*fIntervalHeight;
painter.drawLine(INTERVAL_HCOORD_LEFT,fYPointForZero-nIndex*fIntervalHeight,x1,y1);
}
int nActPaintWidth = ui->widget_rxtx->width()-INTERVAL_HCOORD_LEFT-INTERVAL_WIDGET_RIGHT;
//每隔的間隔高度--橫向:注意使用(float)nActPaintWidth)作為分子,即浮點數
float fIntervalWidth = ((float)nActPaintWidth)/(m_nHSingleLinePointCount-);
for(int nIndex=;nIndex<m_nHSingleLinePointCount;++nIndex)
{
QPen objPen = painter.pen();
if(==nIndex || (m_nHSingleLinePointCount-)==nIndex)
{
objPen.setStyle(Qt::SolidLine);
}
else
{
objPen.setStyle(Qt::DashLine);
}
painter.setPen(objPen);
int nXPoint = INTERVAL_HCOORD_LEFT+nIndex*fIntervalWidth;
painter.drawLine(nXPoint,INTERVAL_WIDGET_TOP,nXPoint,ui->widget_rxtx->height()-INTERVAL_WIDGET_BOTTOM);
}
painter.restore();
}到此這篇關于Qt實現(xiàn)繪制多個設備的流量曲線圖詳解的文章就介紹到這了,更多相關Qt繪制流量曲線圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
C++開發(fā)在IOS環(huán)境下運行的LRUCache緩存功能
本文著重介紹如何在XCODE中,通過C++開發(fā)在IOS環(huán)境下運行的緩存功能。算法基于LRU,最近最少使用,需要的朋友可以參考下2012-11-11

