使用Qt绘图制作一个钟表

使用Qt绘图制作一个钟表

实际效果如下：

一、钟表实现的大概思路
设置定时器，定时器每隔一秒调用repaint()函数，paintEvent()函数随即被调用，利用paintEvent()函数重绘钟表，以秒为单位显示时钟表盘指针的变化。根据获取的当前系统时间的时钟，分钟以及秒钟的数据来绘制钟表的时针，分针以及秒针。paintEvent()函数里有涉及重绘需要调用的函数有四个，分别是重绘表盘函数，重绘时针函数，重绘分针函数以及重绘秒针函数。
二、重绘函数
因为有图形绕点旋转的情况，这里需要使用translate(x,y)函数转换坐标原点，方便成像。绘制钟表指针需要旋转坐标系，然后在旋转过的坐标系中绘制指针。指针绘制完毕后，恢复坐标系。 根据获取系统的时间，算出绘制指针前坐标需要旋转的角度。
时针：30.0*(time.hour()+time.minute()/60.0)
分针：6.0*(time.minute()+time.second()/60.0)
秒针：6.0*(time.second())
1、重绘表盘函数
表盘的刻度有时钟刻度和分钟刻度。一圈有六十个间隔，所以每个间隔6°，每隔6°为一个分钟时刻，每隔30°为一个时钟时刻。

void Dialog::ClockDial(QPainter *painter){
    for(int i=1;i<=60;i++){
        painter->save();
        painter->rotate(6.0*i);
        if(i%5==0){
            painter->drawLine(0,-88,0,-95);
            painter->drawText(-20, -82, 40, 40,
                              Qt::AlignHCenter | Qt::AlignTop,
                              QString::number(i/5));
        }
        else{
            painter->drawLine(0,-92,0,-95);
        }
        painter->restore();
    }
}

2、重绘时针函数
确定组成时针四个点的坐标，使用drawPolygon()函数或者drawConvexPolygon()函数绘制。

const QPoint Dialog::hourhand[4] = {
    QPoint(3, 5),
    QPoint(0, 13),
    QPoint(-3, 5),
    QPoint(0, -40)
};

void Dialog::Hourhand(QPainter *painter){
    QTime time=QTime::currentTime();
    painter->save();
    painter->rotate(30.0*(time.hour()+time.minute()/60.0));
    painter->drawPolygon(hourhand,4);
    painter->restore();
}

3、重绘分针函数
确定组成分针四个点的坐标，使用drawPolygon()函数或者drawConvexPolygon()函数绘制。

const QPoint Dialog::minutehand[4] = {
    QPoint(3, 5),
    QPoint(0, 16),
    QPoint(-3, 5),
    QPoint(0, -70)
};
void Dialog::Minutehand(QPainter *painter){
    QTime time=QTime::currentTime();
    painter->save();
    painter->rotate(6.0*(time.minute()+time.second()/60.0));
    painter->drawPolygon(minutehand,4);
    painter->restore();
}

4、重绘秒针函数
确定组成秒针四个点的坐标，使用drawPolygon()函数或者drawConvexPolygon()函数绘制。

const QPoint Dialog::secondhand[4]={
    QPoint(3, 5),
    QPoint(0, 13),
    QPoint(-3, 5),
    QPoint(0, -85)
};

void Dialog::Secondhand(QPainter *painter){
    QTime time=QTime::currentTime();
    painter->save();
    painter->rotate(6.0*(time.second()));
    painter->drawPolygon(secondhand,4);
    painter->restore();
}

三、paintEvent()函数
依次调用重绘函数。setViewport()函数设定窗口中心，使钟表显示在画面中心。

void Dialog::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    int side = qMin(width(), height());
    painter.setViewport((width() - side) / 2, (height() - side) / 2, side, side);
    painter.setWindow(0,0,200,200);
    painter.translate(100,100);
    ClockDial(&painter);
    Secondhand(&painter);
    Minutehand(&painter);
    Hourhand(&painter);
}

四、代码实现
dialog.h

#ifndef DIALOG_H
#define DIALOG_H


#include <QDialog>


#include<QPainter>
#include<QTime>
#include<QTimerEvent>




class Dialog : public QDialog
{
    Q_OBJECT


public:
    Dialog(QWidget *parent = nullptr);
    ~Dialog();
private:
    const static QPoint secondhand[4];
    const static QPoint minutehand[4];
    const static QPoint hourhand[4];
protected:
    void Secondhand(QPainter*painter);
    void Minutehand(QPainter*painter);
    void Hourhand(QPainter*painter);
    void ClockDial(QPainter*painter);
    void paintEvent(QPaintEvent*event);
    void timerEvent(QTimerEvent*event);


};
#endif // DIALOG_H

dialog.cpp

#include "dialog.h"


const QPoint Dialog::secondhand[4]={
    QPoint(3, 5),
    QPoint(0, 13),
    QPoint(-3, 5),
    QPoint(0, -85)
};


const QPoint Dialog::minutehand[4] = {
    QPoint(3, 5),
    QPoint(0, 16),
    QPoint(-3, 5),
    QPoint(0, -70)
};


const QPoint Dialog::hourhand[4] = {
    QPoint(3, 5),
    QPoint(0, 13),
    QPoint(-3, 5),
    QPoint(0, -40)
};


Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    startTimer(1000);
}


Dialog::~Dialog()
{
    setWindowTitle("Clock");
    resize(360,360);
}




void Dialog::timerEvent(QTimerEvent *event){
    repaint();
}


void Dialog::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    int side = qMin(width(), height());
    painter.setViewport((width() - side) / 2, (height() - side) / 2, side, side);
    painter.setWindow(0,0,200,200);
    painter.translate(100,100);
    ClockDial(&painter);
    Secondhand(&painter);
    Minutehand(&painter);
    Hourhand(&painter);
}


void Dialog::Secondhand(QPainter *painter){




    QTime time=QTime::currentTime();
    painter->save();
    painter->rotate(6.0*(time.second()));
    painter->drawPolygon(secondhand,4);
    painter->restore();
}




void Dialog::Minutehand(QPainter *painter){




    QTime time=QTime::currentTime();
    painter->save();
    painter->rotate(6.0*(time.minute()+time.second()/60.0));
    painter->drawPolygon(minutehand,4);
    painter->restore();
}


void Dialog::Hourhand(QPainter *painter){




    QTime time=QTime::currentTime();
    painter->save();
    painter->rotate(30.0*(time.hour()+time.minute()/60.0));
    painter->drawPolygon(hourhand,4);
    painter->restore();
}




void Dialog::ClockDial(QPainter *painter){
    for(int i=1;i<=60;i++){
        painter->save();
        painter->rotate(6.0*i);
        if(i%5==0){




            painter->drawLine(0,-88,0,-95);
            painter->drawText(-20, -82, 40, 40,
                              Qt::AlignHCenter | Qt::AlignTop,
                              QString::number(i/5));


        }
        else{
            painter->drawLine(0,-92,0,-95);


        }
        painter->restore();


    }
}

main.cpp

#include "dialog.h"


#include <QApplication>


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