目前很多利用Arduino或者stm32來進行機器人或者相關的AI試驗的夥伴們，都有介面顯示或者圖形顯示的需求，如果僅僅是圖形顯示，我們完全可以藉助processing來完成，既方便又快捷，但Processing的不足時完整的介面編寫就變得困難了。
所以，我們可以藉助QT來完成帶有介面的繪圖應該是比較方便的，個人的觀點，至少比VC更容易。
從今天開始，我們來嘗試使用QT完成下位機需要的圖形顯示。當然，如果您不需要帶介面（選單、工具欄、狀態列）的繪圖可以參考我寫的Processing繪圖的相關文章。
Processing摸索前行（2）

在編寫繪圖程式之前，我們必須明白一點，QT中的繪圖一般在paintEvent下實現。而paintEvent是Widget類或者Widget派生類下的一個虛擬函式，需要實現它才能便於我們繪圖。
弄清楚了這個道理，那我們就可以著手開始我們的第一個繪圖程式啦。

第一步，在QT中建立一個Widgets程式:

當然，您如果覺得Widget讓你看著不舒服，不習慣，而你習慣了Form，那你完全可以進入程式把Widget刪除，然後自己新增一個form也是完全可以的。需要注意的是在選擇類資訊的時候注意選擇為Widget：

第二步，在Widget的cpp檔案中實現虛擬函式paintEvent，在標頭檔案中增加其宣告：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::paintEvent(QPaintEvent *event)
{
    
    
    
}
 

標頭檔案中增加宣告

第三步，在paintEvent中寫一個簡單的painter呼叫程式

#include "widget.h"
#include "ui_widget.h"
#include"qpainter.h"        //不加入這個標頭檔案，是不能呼叫QPainter的
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}

//實現painterEvent
 void Widget::paintEvent(QPaintEvent *event)
{
      QPainter painters(this);   //初始化繪畫器
      painters.drawRect(this->width()/4,this->height()/4,this->width()/2,this->height()/2);  繪製矩形
      }

 

當然，別忘記在Widget的cpp中加入標頭檔案#include “qpainter.h”，否則你在寫painters.drawRect函式的時候就不會有智慧程式碼提示。當然也不會有程式的正確執行！
我們上面的程式就是在Widget的中央繪製了一個矩形，效果如下：

總結提煉：
1、在Processing中我們實現了虛擬函式void draw，而QT中我們實現了虛擬函式 void PaintEvent，不同的是Processing只有一個主檔案，而這裡我們的實現是在widget的cpp檔案中完成的。
2、Processing中沒有繪圖器（QPainter），直接可以繪圖，更不需要初始化Painter（當然，在VC中可能更復雜，需要初始化繪圖裝置）。
3、在Processing中，任何繪製都只直接顯示出來的，比如rect語句就是繪製矩形，而不需要藉助QPainter的drawRect的命令來實現繪製。
總結起來就是在QT中比Processing中多了一個步驟，即必須初始化一個QPainter。

好了，第一次繪圖，到這裡已經算完工了，後續我們將結合Arduino的感測器及通訊來完成一些稍微複雜一些的繪圖。