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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
淺談Windows系統(tǒng)下C語言編程中Glib庫的使用
這篇文章主要介紹了Windows系統(tǒng)下C語言編程中Glib庫的使用,Glib庫在多線程編程中經??梢杂玫?需要的朋友可以參考下2016-02-02C/C++實現(xiàn)通訊錄管理系統(tǒng)(附源碼)
這篇文章主要為大家詳細介紹了如何利用C++實現(xiàn)通訊錄管理系統(tǒng),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-12-12C++ 詳細講解stack與queue的模擬實現(xiàn)
C++ Stack(堆棧) 是一個容器類的改編,為程序員提供了堆棧的全部功能,也就是說實現(xiàn)了一個先進后出(FILO)的數據結構,許多程序都使用了 queue 容器。queue 容器可以用來表示超市的結賬隊列或服務器上等待執(zhí)行的數據庫事務隊列2022-04-04