QT繪製簡易錶盤

quinoa發表於2021-06-08

1、簡介

最近學習了一下QT，熟悉了一段時間後發現它的功能還是挺強大的，同時也比較方便使用者上手去使用。現在就基於最近學習的內容，實現一個簡易的帶指標旋轉功能的錶盤。文中表盤的實現是基於QT的QPainter類中的繪圖方法，同時外加QT的定時器設計完成的。效果上肯定沒有貼圖片那麼美觀，不過兩者的設計思想是基本一樣的，這裡的設計方法可以提供給你一個不錯的參考。

2、設計思路

在講解設計思路前還是先來看下繪製的錶盤所實現的效果吧！後面對實現效果進行一步步拆解來講解，這樣或許會更加直觀，更便於理解。

我們先不去考慮指標旋轉這一動態過程實現，可以將錶盤分解析為3個組成部分，錶盤的外形輪廓、指標和顯示的當前速度的數值。外形輪廓由一個圓弧和一些指示刻度組成，它的繪製肯定要使用QT中的畫圓弧的函式、畫線函式還有顯示文字函式。指標是一個不規則的多邊形，它的繪製會用到QT中的繪製多邊形的函式。顯示當前速度值比較簡單些，直接使用顯示文字函式繪製。

有了靜態部分的基礎，現在開始考慮指標的動態旋轉過程和旋轉過程中的漸變效果是如何實現的。指標旋轉的角度應該和當前的轉速相互對應，當前轉速改變時，會根據新的轉速計算出當前指標位於什麼角度的位置，然後可以呼叫QT的旋轉角度函式讓多邊形指標旋轉到這個位置。旋轉的漸變效果其實是通過繪製扇形實現的，要繪製扇形的角度和指標旋轉的角度是一樣，由於繪製的扇形的內部的著色採用了顏色的線性內插，所以不同的角度顯示的顏色程度不同，因此給人以漸變的效果。

轉速的週期改變是在定時器中完成的，建構函式中初始化一個週期定時器，當定時器時間超時，根據當前轉速的狀態（上行還是下行），確定讓轉速自增1還是自減1。轉速改變時，呼叫函式讓介面進行重新繪製。

3、核心函式

所用到的繪製函式都是QPainter類中的方法, QPainter可以理解成是個畫家，這個畫家有很多種繪製圖形的方法，它可以在所以繼承QPaintDevice的類上進行繪製。

繪製多邊形：

　　drawPolygon

QT中drawPolygon有很多過載版本，要傳入的引數一般就是要指定繪製多邊形的所有頂點位置。

繪製圓弧：

　　drawArc

同理，QT中也有很多drawArc的過載版本。它傳入的引數比較特殊，QT中的繪製圓弧是在一個正方形中操作的，要傳入的是正方形區域的大小，繪製圓弧的圓心預設是在傳入正方形區域中心。除此之外還需要指定要繪製圓弧的起始角度和跨越的角度，它傳入是值是實際角度*16。當傳入的角度值為正，表示逆時針繪製圓弧，角度值為負，表示順時鐘繪製圓弧。

繪製扇形：

　　drawPie

繪製扇形和繪製圓弧的引數類似，可參考繪製圓弧。

QPainter座標轉換：

　　translate

如執行painter.translate(100, 100)，後續繪製的參考座標變成了相對100, 100位置而言的。執行painter.drawLine(0, 0, 0, 20)，實際繪製直線的兩端點是（100， 100）和（100， 120）

旋轉：

　　ratate

座標轉換和旋轉過程可參考下圖：

儲存和恢復QPainter狀態：

　　save

　　restore

save儲存當前QPainter狀態（即當前對QPainter的設定）到堆疊，restore恢復之前儲存的狀態。這兩個方法在QPainter繪圖中很有用，詳細可參考後面程式碼。

4、程式碼實現

先從定時器函式函式來看，當建構函式中設定的定時器超時，會產生定時器事件，timerEvent被自動呼叫

void Widget::timerEvent(QTimerEvent *e)
{
    int timerId = e->timerId();

    if(this->time_id == timerId) {
        if(this->status == 0) {
            this->speed += 1;
            if(this->speed >= 180)
                this->status = 1;
        }else {
            this->speed -= 1;
            if(this->speed <= 0)
                this->status = 0;

        }

        this->update();
    }
}

判斷當前轉速是處於上行還是下行狀態，根據轉速所處的狀態修改轉速。然後呼叫this->update(), 該函式會產生Widget類中的重繪事件，paintEvent函式被執行。

painteEvent函式內容如下：

void Widget::paintEvent(QPaintEvent *event)
{
    qreal angle;

    angle = (qreal)270 / (180-1); 

    QPainter painter(this);

    painter.translate(width()/2, height()/2); 

    drawFrame(&painter, angle); //①

    drawPointer(&painter, angle); //②

    drawSpeed(&painter); //③
}

① 繪製儀表盤圓弧形狀的外框

② 根據轉速大小，計算當前指標所在的角度，然後繪製指標和產生漸變效果的扇形

③ 顯示當前轉速值

drawFrame函式

void Widget::drawFrame(QPainter *painter, qreal angle)
{
    painter->save();
    
    painter->setBrush(QBrush(QColor(0, 255, 0, 255), Qt::SolidPattern));
    painter->drawArc(-200, -200, 400, 400, -135*16, -270*16); //①
    
    painter->restore();
    
    for(int i = 0; i < 180; i++) { //②
       painter->save();

       painter->rotate(-225 + i * angle);

       if(i % 10 == 0) {
           painter->drawLine(180, 0, 200, 0);
       }else {
           painter->drawLine(190, 0, 200, 0);
       }

       painter->restore();
    }

    painter->save();

    for(int i = 0; i < 9; i++) { //③

        int xTextPos = 180 * qCos((225 - i * 15)*3.14/180);
        int yTextPos = -180 * qSin((225 - i * 15)*3.14/180);
        painter->drawText(xTextPos+5, yTextPos+10, QString::number(i * 10));
        painter->drawText(-xTextPos-25, yTextPos+10, QString::number((18 - i) * 10));
    }
    painter->drawText(-10, -165, "90");
    
    painter->restore();
}

① 繪製錶盤的外形圓弧

② 繪製圓弧上的刻度資訊

③ 繪製錶盤外形的刻度旁邊的數值，這裡利用了圓的對稱性

drawPointer函式

void Widget::drawPointer(QPainter *painter, qreal angle)
{
    QPoint point[4] = {
        QPoint(0, 10),
        QPoint(-10, 0),
        QPoint(0, -170),
        QPoint(10, 0),
    };

    painter->save();

    QLinearGradient linear;           //①
    linear.setStart(-200, -200);
    linear.setFinalStop(200, 200);
    linear.setColorAt(0, QColor(0, 255, 255, 0));
    linear.setColorAt(1, QColor(0, 255, 255, 255));
    painter->setPen(Qt::NoPen);
    painter->setBrush(linear);
    painter->drawPie(-200, -200, 400, 400, 225 * 16, -(angle * this->speed) * 16);

    painter->restore();

    painter->save();

    painter->setBrush(QBrush(QColor(0, 0, 0, 255), Qt::SolidPattern));
    painter->rotate(-135 + this->speed * angle);
    painter->drawPolygon(point, 4); //②

    painter->restore();
}

① 根據當前速度計算扇形區域的大小，繪製漸變扇形

② 根據當前速度計算指標所要在的位置，旋轉指標到該位置

drawSpeed函式

void Widget::drawSpeed(QPainter *painter)
{
    painter->save();

    painter->setPen(QColor("#0"));
    //  繪製速度
    QFont font("Times", 10, QFont::Bold);
    font.setBold(true);
    font.setPixelSize(66);
    painter->setFont(font);
    painter->drawText(-60, 100, 120, 92, Qt::AlignCenter, QString::number(speed));
    painter->restore();
}

drawSpeed函式在指定位置，使用指定顏色字型，顯示當前速度

5、小結

到此，模擬儀表盤的實現講解完畢了，這也算對這幾天QT的學習做了一個小小的總結。從使用過程中可以感受到使用QT進行圖形介面的設計，軟體編寫上還是比較靈活的。QT的GUI功能非常很強大，它提供的介面函式很多，但想要都用好的確很難，平時還需要多看看QT官方文件中的解釋和提供的demo。

完整程式碼

#include "widget.h"

#include <QPainter>
#include <QBrush>
#include <QLabel>
#include <QTimerEvent>
#include <QLinearGradient>
#include <QFont>

#include <QtMath>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    resize(800, 480);
    setWindowTitle("模擬儀表盤");

    this->speed = 0;
    this->status = 0;

    this->time_id = this->startTimer(50);
}

Widget::~Widget()
{
}

void Widget::paintEvent(QPaintEvent *event)
{
    qreal angle;

    angle = (qreal)270 / (180-1);

    QPainter painter(this);

    painter.translate(width()/2, height()/2);

    drawFrame(&painter, angle);

    drawPointer(&painter, angle);

    drawSpeed(&painter);
}

void Widget::drawFrame(QPainter *painter, qreal angle)
{
    painter->save();
    
    painter->setBrush(QBrush(QColor(0, 255, 0, 255), Qt::SolidPattern));
    painter->drawArc(-200, -200, 400, 400, -135*16, -270*16);
    
    painter->restore();
    
    for(int i = 0; i < 180; i++) {
       painter->save();

       painter->rotate(-225 + i * angle);

       if(i % 10 == 0) {
           painter->drawLine(180, 0, 200, 0);
       }else {
           painter->drawLine(190, 0, 200, 0);
       }

       painter->restore();
    }

    painter->save();

    for(int i = 0; i < 9; i++) {

        int xTextPos = 180 * qCos((225 - i * 15)*3.14/180);
        int yTextPos = -180 * qSin((225 - i * 15)*3.14/180);
        painter->drawText(xTextPos+5, yTextPos+10, QString::number(i * 10));
        painter->drawText(-xTextPos-25, yTextPos+10, QString::number((18 - i) * 10));
    }
    painter->drawText(-10, -165, "90");
    
    painter->restore();
}

void Widget::drawPointer(QPainter *painter, qreal angle)
{
    QPoint point[4] = {
        QPoint(0, 10),
        QPoint(-10, 0),
        QPoint(0, -170),
        QPoint(10, 0),
    };

    painter->save();

    QLinearGradient linear;
    linear.setStart(-200, -200);
    linear.setFinalStop(200, 200);
    linear.setColorAt(0, QColor(0, 255, 255, 0));
    linear.setColorAt(1, QColor(0, 255, 255, 255));
    painter->setPen(Qt::NoPen);
    painter->setBrush(linear);
    painter->drawPie(-200, -200, 400, 400, 225 * 16, -(angle * this->speed) * 16);

    painter->restore();

    painter->save();

    painter->setBrush(QBrush(QColor(0, 0, 0, 255), Qt::SolidPattern));
    painter->rotate(-135 + this->speed * angle);
    painter->drawPolygon(point, 4);

    painter->restore();
}

void Widget::drawSpeed(QPainter *painter)
{
    painter->save();

    painter->setPen(QColor("#0"));
    //  繪製速度
    QFont font("Times", 10, QFont::Bold);
    font.setBold(true);
    font.setPixelSize(66);
    painter->setFont(font);
    painter->drawText(-60, 100, 120, 92, Qt::AlignCenter, QString::number(speed));
    painter->restore();
}

void Widget::timerEvent(QTimerEvent *e)
{
    int timerId = e->timerId();

    if(this->time_id == timerId) {
        if(this->status == 0) {
            this->speed += 1;
            if(this->speed >= 180)
                this->status = 1;
        }else {
            this->speed -= 1;
            if(this->speed <= 0)
                this->status = 0;

        }

        this->update();
    }
}

widget.cpp

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>


class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    void paintEvent(QPaintEvent *event);
    void timerEvent(QTimerEvent *e);

private:
    void drawFrame(QPainter *painter, qreal angle);
    void drawPointer(QPainter *painter, qreal angle);
    void drawSpeed(QPainter *painter);


    int speed;
    int time_id;
    int status;

};
#endif // WIDGET_H

widegt.h

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

main.cpp

canvas繪製圓盤走動鐘錶效果
2018-09-09
Canvas
Qt之自繪製餅圖
2016-11-05
QT
例項QT程式 —— Qt自繪製小時鐘
2020-09-30
QT
QT簡易計算機制作
2018-04-09
QT計算機
p5.js簡易實現 apple watch 三色錶盤
2018-06-05
JSAPP
Qt繪製自定義箭頭圖元
2019-05-05
QT
canvas繪製鐘錶效果程式碼例項
2017-02-13
Canvas
C/C++ QT QChart 繪製元件應用
2021-11-19
C++QT元件
如何自學qt（12）——簡單的繪圖
2020-11-04
QT繪圖
簡易流程圖繪圖軟體
2021-10-15
流程圖繪圖
Python pyecharts繪製儀表盤
2021-12-19
PythonEcharts
canvas繪製圓形鐘錶程式碼例項
2018-05-11
Canvas
使用QT做一個簡易計算器
2020-12-28
QT
打造真實感十足的速度錶盤：WPF實現動態效果與刻度繪製
2024-03-16
Flutter的繪製流程簡述
2019-11-24
Flutter
Tayasui Sketches Pro for Mac(簡易繪圖工具)
2020-06-20
UIMac繪圖
[Android][抽獎轉盤]②---繪製轉盤的獎項文字
2017-03-22
Android
QT風格（QStyle）：繪製一個自定義QComboBox
2020-12-06
QT
C++ Qt開發：Charts折線圖繪製詳解
2023-12-23
C++QT
java,製作簡易畫圖板
2017-01-13
Java
迴圈_推導式_繪製棋盤_函式
2020-11-21
函式
C++ Qt開發：Charts繪製各類圖表詳解
2023-12-25
C++QT
繪製流程圖的簡單軟體
2019-10-28
流程圖
SVG繪製直線簡單介紹
2018-08-04
SVG
【練習】製作簡易通訊錄
2017-11-19
簡易rpm套件的製作(轉)
2007-08-09
套件
基於FFmpeg和Qt實現簡易影片播放器
2023-11-25
QT播放器
每日一問：簡述 View 的繪製流程
2019-06-11
View
使用Canvas繪製簡單工程符號（續）
2020-10-28
Canvas符號
化學繪圖軟體ChemDraw，繪製簡單的化學元素
2023-02-22
繪圖
自定義繪製鐘錶控制元件，這一篇就夠了
2019-06-21
控制元件
html+css 製作簡易導航欄
2018-11-28
HTMLCSS
Dreamweaver製作簡易的拼圖遊戲教程
2012-06-20
遊戲
Flutter自定義繪製（1）- 繪製基礎
2019-02-18
Flutter
View的繪製二：View的繪製流程
2019-03-24
View
Qt 繪圖與動畫系統
2016-03-12
QT繪圖動畫
繪製流程
2018-07-20
Android繪製優化（一）繪製效能分析
2017-03-20
Android優化