目录

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.源码

源码下载地址
https://download.csdn.net/download/Redboy_Crazy/12904634

• 部分关键源码文件 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！

---