Qt自定義Widget之儀錶盤

2020 年 4 月 7 日
筆記

上次和大家分享了使用Qml製作的儀錶盤的過程，這次和大家分享下Qt的自定義控制項過程。

效果圖如上，有圖有真相啊。

程式源碼來自B站上，幾乎沒做任何修改，這裡主要說下自定義控制項的流程。

程式源碼：https://github.com/xieguiproject/GCT.git

B站影片地址：https://www.bilibili.com/video/BV194411u7f1

以前一篇關於一些2D繪圖的文章：Qt 2D 繪圖入門

首先Qt已經為我們提供了眾多豐富且易用的基礎控制項，但是很多情況下我們需要實現自己的設計形態，如上面的儀錶盤。這時候就需要自定義控制項了，而且實際使用中還會用到樣式表的。本次主要簡述下自定義儀錶盤的流程。

一、儀錶盤自身工作流程

儀錶盤控制項繼承自QWidget，使用定時器以100ms的頻率觸發painEvent繪圖事件。

繪製控制項程式如下：

//繪製控制項  void Dashboard1::drawDashBoardWiget(QPainter *painter)  {      //全局參數初始化      qParmInit();      //設置透明      setOtherBackgroud(true,painter);      //繪製錶盤      drawDashBoard(painter);      //繪製刻度尺      drawDivideRule(painter);      //繪製指針      drawDishBoardPointer(painter);      //繪製錶盤文字      drawDashBoardText(painter);  }

刻度的位置通過setValue()方法來調整。

1. drawDashBoard()

只保留繪製錶盤部分程式碼，如圖，標出了4個數字，即是繪製了4個圓，程式中則是調用了4次drawEllipse(繪製橢圓)進行繪製。