目錄

1.簡介
2.效果圖
3.重點講解
4.原始碼

---

1.簡介

本文主要介紹瞭如何在控制元件中自定義繪製圖形，重點內容包含

• 如何繪製秒針；
• 如何繪製數字。

本文還有動態效果圖、重點講解和原始碼，讀者們可以方便檢視學習和交流。

回目錄

2.效果圖

Qt自繪製時鐘

回目錄

3.重點講解

1）如何繪製秒針

通過遞迴地方式依次遍歷控制元件佈局中包含的所有子佈局、子控制元件的方式來獲取指定控制元件及其子控制元件的物件資訊（物件名稱、物件型別名稱）。

“秒針”指標的繪製座標點

    static const QPoint secondHand[3] = {
        QPoint(7, 8),
        QPoint(-7, 8),
        QPoint(0, -80)
    };

繪製秒針：

    p->rotate(6.0 * time.second());
    p->drawConvexPolygon(secondHand, 3);

以下是“秒針”指標的截圖資訊：

“秒針”指標

２）如何繪製數字

先定義繪製字型大小，迴圈依次通過 QPainter::drawText 繪製刻度上的字型：

    QFont font = p->font();
    font.setPixelSize(10);
    p->setFont(font);

    for (int i = 0; i < 12; ++i) {
        p->drawLine(88, 0, 96, 0);
        p->rotate(30.0);

        int nNum = i + 4;
        if( nNum > 12 ){
            nNum -= 12;
        }
        p->drawText(75, 0, QString::number(nNum));
    }

回目錄

4.原始碼

• 部分關鍵原始碼檔案 main.cpp

注：本文參考Qt Demo程式修改。

main.cpp

#include <QtGui>
#include "rasterwindow.h"

//! [5]
class AnalogClockWindow : public RasterWindow
{
public:
    AnalogClockWindow();

protected:
    void timerEvent(QTimerEvent *) override;
    void render(QPainter *p) override;

private:
    int m_timerId;
};
//! [5]


//! [6]
AnalogClockWindow::AnalogClockWindow()
{
    setTitle("Analog Clock");
    resize(200, 200);

    m_timerId = startTimer(1000);
}
//! [6]

//! [7]
void AnalogClockWindow::timerEvent(QTimerEvent *event)
{
    if (event->timerId() == m_timerId)
        renderLater();
}
//! [7]

//! [1] //! [14]
void AnalogClockWindow::render(QPainter *p)
{
//! [14]
//! [8]
    static const QPoint hourHand[3] = {
        QPoint(7, 8),
        QPoint(-7, 8),
        QPoint(0, -40)
    };
    static const QPoint minuteHand[3] = {
        QPoint(7, 8),
        QPoint(-7, 8),
        QPoint(0, -70)
    };
    static const QPoint secondHand[3] = {
        QPoint(7, 8),
        QPoint(-7, 8),
        QPoint(0, -80)
    };

    QColor hourColor(127, 0, 127);
    QColor minuteColor(0, 127, 127, 191);
//    QColor secondColor(0, 255, 255, 0);
    QColor secondColor(Qt::red);
//! [8]

//! [9]
    p->setRenderHint(QPainter::Antialiasing);
//! [9] //! [10]
    p->translate(width() / 2, height() / 2);

    int side = qMin(width(), height());
    p->scale(side / 200.0, side / 200.0);
//! [1] //! [10]

//! [11]
    p->setPen(Qt::NoPen);
    p->setBrush(hourColor);
//! [11]

//! [2]
    QTime time = QTime::currentTime();

    p->save();
    qreal nReal = 30.0 * ((time.hour() + time.minute() / 60.0));
    p->rotate(nReal);
    p->drawConvexPolygon(hourHand, 3);  // 繪製
    p->restore();
//! [2]

//! [12]    // 繪製 時針 刻度
    p->setPen(hourColor);

    QFont font = p->font();
    font.setPixelSize(10);
    p->setFont(font);

//    p->rotate(-nReal);
    qDebug() << "nReal" << nReal;

    for (int i = 0; i < 12; ++i) {
        p->drawLine(88, 0, 96, 0);
        p->rotate(30.0);

        int nNum = i + 4;
        if( nNum > 12 ){
            nNum -= 12;
        }
        p->drawText(75, 0, QString::number(nNum));
    }

//    const QRect rectangle = QRect(75, 88, 10, 10);
//    p->drawText(rectangle, Qt::AlignCenter, QString::number(12));


//! [12] //! [13]
    p->setPen(Qt::NoPen);
    p->setBrush(minuteColor);
//! [13]

//! [3]
    p->save();
    p->rotate(6.0 * (time.minute() + time.second() / 60.0));
    p->drawConvexPolygon(minuteHand, 3);
    p->restore();
//! [3]

//! [4]     // 繪製 分/秒針 刻度
    p->setPen(minuteColor);
    p->setFont(QFont("Arial", 30));

    for (int j = 0; j < 60; ++j) {
        if ((j % 5) != 0){
            p->drawLine(92, 0, 96, 0);
        }else{
//            p->drawText(rect(), Qt::AlignCenter, "Qt");
//            p->drawText(85, 0, QString::number(j/5));
        }
        p->rotate(6.0);
    }

    p->setPen(Qt::NoPen);
    p->setBrush(secondColor);
//! [3]
    p->save();
    p->rotate(6.0 * time.second());
    p->drawConvexPolygon(secondHand, 3);
    p->restore();
//! [3]

//! [4]
    p->setPen(secondColor);

//! [4]
}

int main(int argc, char **argv)
{
    QGuiApplication app(argc, argv);

    AnalogClockWindow clock;
    clock.show();

    return app.exec();
}

回目錄

---

加油，向未來！GO~
Come on！

---