第6章 數(shù)據(jù)可視

智能家居平臺(tái)應(yīng)用項(xiàng)目化教程第6章數(shù)據(jù)可視相關(guān)知識(shí)介紹項(xiàng)目實(shí)施實(shí)訓(xùn)項(xiàng)目2項(xiàng)目描述項(xiàng)目描述3項(xiàng)目描述數(shù)據(jù)可視模塊利用折線圖形式將環(huán)境數(shù)據(jù)的變化趨勢(shì)直觀展示給用戶，使其更易于觀察和理解。4相關(guān)知識(shí)介紹5相關(guān)知識(shí)介紹Qt中提供了強(qiáng)大的2D繪圖系統(tǒng)，可以使用相同的API在屏幕和繪圖設(shè)備上進(jìn)行繪制，整個(gè)繪圖系統(tǒng)基于QPainter，QPainterDevice和QPaintEngine三個(gè)類。QPainter用來執(zhí)行繪制的操作；QPaintDevice是一個(gè)二維空間的抽象，這個(gè)二維空間可以由QPainter在上面進(jìn)行繪制；QPaintEngine提供了畫筆painter在不同的設(shè)備上進(jìn)行繪制的統(tǒng)一的接口。繪圖系統(tǒng)由QPainter完成具體的繪制操作，QPainter類提供了大量高度優(yōu)化的函數(shù)來完成GUI編程所需要的大部分繪制工作。它可以繪制一切想要的圖形，從最簡(jiǎn)單的一條直線到其他任何復(fù)雜的圖形，例如：點(diǎn)、線、矩形、弧形、餅狀圖、多邊形、貝塞爾弧線等。此外，QPainter也支持一些高級(jí)特性，例如反走樣（針對(duì)文字和圖形邊緣）、像素混合、漸變填充和矢量路徑等，QPainter也支持線性變換，例如平移、旋轉(zhuǎn)、縮放。6繪制圖形相關(guān)知識(shí)介紹7繪制圖形如右側(cè)圖片所示，其繪制了具有特殊效果的藝術(shù)字“Qt”。該部分代碼首先為該部件創(chuàng)建了一個(gè)QPainter對(duì)象，用于后面的繪制。使用setPen()來設(shè)置畫筆的顏色（淡藍(lán)色）。通過使用QFont來構(gòu)建我們想要的字體，setFamily()設(shè)置字體為微軟雅黑、setPointSize()設(shè)置點(diǎn)大小30、setItalic()設(shè)置斜體，然后通過setFont()來設(shè)置字體，最后調(diào)用drawText()來實(shí)現(xiàn)文本的繪制，這里的rect()是指當(dāng)前窗體的顯示區(qū)域，Qt::AlignCenter指文本居中繪制。

QPainterpainter(this);//設(shè)置畫筆顏色

painter.setPen(QColor(0,160,230));//設(shè)置字體：微軟雅黑、點(diǎn)大小50、斜體

QFontfont;font.setFamily("MicrosoftYaHei");font.setPointSize(50);font.setItalic(true);painter.setFont(font);//繪制文本painter.drawText(rect(),Qt::AlignCenter,"Qt");相關(guān)知識(shí)介紹坐標(biāo)系統(tǒng)由QPainter類控制，再加上QPaintDevice和QPaintEngine，就形成了Qt的繪圖體系。QPainter：用于執(zhí)行繪圖操作QPaintDevice：二維空間的抽象層，可以使用QPainter在它上面進(jìn)行繪制。QPaintEngine：提供了統(tǒng)一的接口，用于QPainter在不同的設(shè)備上進(jìn)行繪制。QPainter邏輯坐標(biāo)與QPaintDevice物理坐標(biāo)的映射，由QPainter的變換矩陣（transformationmatrix）、視口（viewport）和窗口（window）完成。默認(rèn)情況下，物理坐標(biāo)與邏輯坐標(biāo)系統(tǒng)是重合的，QPainter也支持坐標(biāo)轉(zhuǎn)換，例如：旋轉(zhuǎn)、縮放。8坐標(biāo)系統(tǒng)項(xiàng)目實(shí)施9項(xiàng)目實(shí)施數(shù)據(jù)可視模塊主要通過實(shí)時(shí)監(jiān)測(cè)光照參數(shù)的數(shù)值變化，并利用折線圖的形式將這種變化顯示出來，其中計(jì)時(shí)器的時(shí)間為1秒，縱坐標(biāo)為光照值，橫坐標(biāo)為數(shù)值編號(hào)，其顯示的個(gè)數(shù)固定為6。通過本項(xiàng)目的完成，使學(xué)生可以掌握以下技能：①能夠理解Qt中關(guān)于2D繪圖的基本知識(shí)；②能夠完成坐標(biāo)軸的繪制；③能夠利用代碼監(jiān)測(cè)光照值的變化并將其以折線圖的形式顯示出來；④能夠通過調(diào)試解決代碼的錯(cuò)誤提示并保證正常編譯運(yùn)行。10方案設(shè)計(jì)和項(xiàng)目目標(biāo)項(xiàng)目實(shí)施在SmartHome項(xiàng)目中新建Qt設(shè)計(jì)師界面類LineChart，其主要用于實(shí)現(xiàn)光照參數(shù)的折線圖功能，其界面布局保持默認(rèn)，即如左下圖所示，同時(shí)將QDialog界面的名稱設(shè)置為L(zhǎng)ineChart，如右下圖所示。11新建界面類文件項(xiàng)目實(shí)施12修改界面布局控件ID控件類別控件內(nèi)容btnLineQPushButton繪圖修改主界面smart.ui的“數(shù)據(jù)可視”頁(yè)中的界面布局，其布局效果如下圖所示，主界面smart.ui中數(shù)據(jù)可視頁(yè)控件的詳細(xì)配置如下表所示：項(xiàng)目實(shí)施數(shù)據(jù)可視功能主要是用于對(duì)環(huán)境參數(shù)進(jìn)行監(jiān)聽，并將數(shù)值以折線圖的形式展現(xiàn)給用戶，使其能夠直觀總結(jié)出參數(shù)的變化趨勢(shì)，其功能模塊主要由頭文件linechart.h和源文件linechart.cpp實(shí)現(xiàn)。其中l(wèi)inechart.h的具體編寫步驟如下：（1）打開頭文件linechart.h并修改，在其首部引入其它功能的頭文件，以此實(shí)現(xiàn)功能模塊之間的交互，因此在代碼#include<QDialog>下一行寫入如下代碼：#include"smart.h"http://導(dǎo)入主函數(shù)功能頭文件#include"QPainter"http://導(dǎo)入繪圖函數(shù)頭文件13修改LineChart類項(xiàng)目實(shí)施（2）在classLineChart:publicQDialog函數(shù)的public中聲明所需變量，同時(shí)在privateslots中對(duì)各個(gè)函數(shù)事件進(jìn)行聲明，其詳細(xì)代碼如下所示：public:explicitLineChart(QWidget*parent=0);~LineChart();intshu[6];//橫坐標(biāo)上坐標(biāo)點(diǎn)的數(shù)值組成的數(shù)組

floatzhi[6];//縱坐標(biāo)上坐標(biāo)點(diǎn)的數(shù)值組成的數(shù)組

boolpanDuan;//用于判斷數(shù)值是否超出范圍而需要調(diào)整坐標(biāo)系

QTimer*timer;//計(jì)時(shí)器privateslots:voidTimer();//用于定時(shí)更新橫縱坐標(biāo)上的數(shù)值

voidpaintEvent(QPaintEvent*);//用于繪制折線圖14修改LineChart類項(xiàng)目實(shí)施對(duì)于數(shù)據(jù)可視功能源文件linechart.cpp的具體操作如下：（1）打開源文件linechart.cpp，在函數(shù)LineChart::LineChart(QWidget*parent)中輸入功能代碼，其主要用于實(shí)現(xiàn)定時(shí)更新橫軸坐標(biāo)的數(shù)值，具體代碼如下：

this->setWindowTitle("光照");timer=newQTimer();//聲明計(jì)時(shí)器

connect(timer,SIGNAL(timeout()),this,SLOT(Timer()));timer->start(1000);//每1秒更新一次橫縱坐標(biāo)上的數(shù)值

for(inti=0;i<6;i++){shu[i]=i+1;zhi[i]=0;}15修改LineChart類項(xiàng)目實(shí)施16修改LineChart類（2）在程序尾部插入繪圖事件實(shí)現(xiàn)函數(shù)，這些函數(shù)均與頭文件linechart.h中privateslots中聲明的函數(shù)一一對(duì)應(yīng)，具體代碼如下：/**函數(shù)名稱:Timer()*函數(shù)功能:計(jì)時(shí)器*返回值:空*/voidLineChart::Timer(){for(inti=0;i<5;i++){shu[i]=shu[i+1];//將當(dāng)前橫坐標(biāo)上的數(shù)值賦給前一個(gè)橫坐標(biāo)，造成數(shù)值向左移動(dòng)

zhi[i]=zhi[i+1];//將當(dāng)前縱坐標(biāo)上的數(shù)值賦給前一個(gè)縱坐標(biāo)，造成數(shù)值向左移動(dòng)

}shu[5]=shu[5]+1;zhi[5]=Illumination_Value.toFloat();//獲取光照值

update();}項(xiàng)目實(shí)施17修改LineChart類/**函數(shù)名稱:paintEvent(QPaintEvent*)*函數(shù)功能:繪制光照折線圖*返回值:空*/voidLineChart::paintEvent(QPaintEvent*){if(Illumination_Value.toFloat()<=2000)//判斷光照值是否小于等于2000{QPainterpaint(this);//實(shí)例化QPainter類

paint.setRenderHint(QPainter::Antialiasing,true);//打開QPainter的反走樣功能

paint.drawLine(0,250,300,250);//在前兩個(gè)參數(shù)確定的坐標(biāo)點(diǎn)到后兩個(gè)參數(shù)確定的坐標(biāo)點(diǎn)之間畫線

paint.drawLine(50,0,50,300);paint.setBrush(QColor(0,0,0));//使用畫刷填充

for(inti=0;i<6;i++){paint.drawText(70+30*i,270,QString::number(shu[i]));//繪制橫坐標(biāo)上的坐標(biāo)點(diǎn)數(shù)值

}項(xiàng)目實(shí)施18修改smart.cpp源文件for(inti=0;i<6;i++){if(zhi[i]>=220){panDuan=1;break;}else{panDuan=0;}}if(panDuan){for(inti=0;i<11;i++){paint.drawText(15,250-(20+20*i),QString::number(8*(20+20*i)));//繪制縱坐標(biāo)上的坐標(biāo)點(diǎn)數(shù)值

}for(inti=0;i<6;i++){paint.drawEllipse(70+30*i,250-zhi[i]/8,5,5);//繪制橢圓用于代表數(shù)據(jù)點(diǎn)

}項(xiàng)目實(shí)施19修改smart.cpp源文件for(inti=0;i<5;i++){paint.drawLine(70+30*i,250-zhi[i]/8,70+30*(i+1),250-zhi[i+1]/8);//在兩點(diǎn)之間繪制直線

}}else{for(inti=0;i<11;i++){paint.drawText(15,250-(20+20*i),QString::number(20+20*i));}for(inti=0;i<6;i++){paint.drawEllipse(70+30*i,250-zhi[i],5,5);}for(inti=0;i<5;i++){paint.drawLine(70+30*i,250-zhi[i],70+30*(i+1),250-zhi[i+1]);}}}}項(xiàng)目實(shí)施20修改Smart類（1）在LineChart類修改完畢后，繼續(xù)修改對(duì)應(yīng)Smart類中的代碼，在其頭文件smart.h中的privateslots:添加如下代碼：privateslots:......voidon_btnLine_clicked();（2）隨后在源文件smart.cpp的尾部添加與頭文件相對(duì)應(yīng)的代碼：/**函數(shù)名稱:on_btnLine_clicked()*函數(shù)功能: