利用qt制作时钟

我们需要利用代码来进行一个时钟的制作，用窗口来显示。

首先需要通过QPainter类来在painterEvent（）函数中来绘制钟表，以下是此类的一些基础函数。
介绍一些绘制图形函数：
drawPoint() 绘制点
drawLine() 绘制线
drawRect() 绘制矩形
drawEllipse() 绘制椭圆（绘制圆也是此函数）
drawConvexPolygon() 绘制凸多边形
drawText（） 编制文本

还有QPainter类的某些角色
QPen：绘制几何图形的边缘，可绘制颜色，宽度，线的风格等
QBrush：用于几何图形的调色板与填充

则可借用setPen（）来当做画笔来使用。
setBrush（）来当做填充器使用来填充颜色。

setPen(color)；
然后我们的绘制将会用此颜色的画笔来绘制图形边缘。
setBrush(color)；
之后我们的绘制图形时，我们将用此颜色来填充。
其中颜色的定义：

QColor color1(0,0,0);//其中的三个数字分别代表的颜色的R.G.B码

QPainter类绘制时初始坐标为左上角顶点，此处为(0,0)
我们可以通过

painter.translate(x,y);

来重新确立坐标原点

以下是dialog.cpp的完整代码

#include "dialog.h"
#include "ui_dialog.h"
#include<QPainter>
#include<QTime>
#include<QTimer>
#include<QPixmap>

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::Dialog)
{
    ui->setupUi(this);
    resize(700,500);//程序框大小
    
    //计时器的使用
    QTimer *timer = new QTimer(this);
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));
     timer->start(1);
}

Dialog::~Dialog()
{
    delete ui;
}

void Dialog::paintEvent(QPaintEvent *event)
{


    //指针的形状四边形绘制定义指针的四点
    static const  QPoint hourHand[4] = {        QPoint(4,1),        QPoint(-4,1),        QPoint(-1,-35)  ,QPoint(1,-35)  };
    static const  QPoint minuteHand[4] =    {        QPoint(3,1),        QPoint(-3,1),        QPoint(-1,-60)  ,QPoint(1,-60)  };
    static const  QPoint secondHand[4] =    {        QPoint(2,1),        QPoint(-2,1),        QPoint(-1,-80) ,QPoint(1,-80)   };

    //颜色的定义
    QColor color(0,0,0);
    QColor color1(123,34,23);
    QColor color2(255,255,153);

    QPainter painter(this);

    //调用资源绘制背景图
    QPixmap map(":/new/prefix1/beijing/123.png");
    QRect q(0,0,1000,675);
    QRect q1(0,0,width(),height());
    painter.drawPixmap(q1,map,q);

    //更换坐标原点
    painter.translate(550,200);

    //首先我们通过 setRenderHint() 来设置反走样，否则绘制出来的线条会出现锯齿
    painter.setRenderHint(QPainter::Antialiasing);


    painter.drawEllipse(-90,-90,180,180);//钟的最外层圆绘制
  
    painter.setPen(Qt::NoPen);
    painter.setBrush(color);
    painter.drawEllipse(-4,-4,8,8);//钟的中心原点，用一个黑色圆把指针尾巴覆盖

    QTime time = QTime::currentTime();//校准系统时间

     //时针的绘制
     painter.setPen(Qt::NoPen);
     painter.setBrush(color);
     painter.save();//用来保存painter的状态
     painter.rotate(30.0 * (time.hour() + time.minute() / 60.0));
     painter.drawConvexPolygon(hourHand,4);
     painter.restore();//恢复到初始坐标原点的状态

      //描绘大刻度上的数字
     painter.setPen(color);
     for(int i=0;i<12;i++)
     {
         painter.rotate(30.0);
         painter.drawLine(80,0,90,0);
         painter.drawText(-20,-82,40,40,Qt::AlignHCenter|Qt::AlignTop,QString::number(i+1));
     }

     //分针的绘制
     painter.setPen(Qt::NoPen);
     painter.setBrush(color1);
     painter.save();
     painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
     painter.drawConvexPolygon(minuteHand,4);
     painter.restore();

      //小刻度
     painter.setPen(color1);
     for(int i = 0; i<60;i++)
     {        if(i % 5)
         painter.drawLine(85,0,90,0);
         painter.rotate(6.0);
     }
     
     //秒针的绘制
     painter.setPen(Qt::NoPen);
     painter.setBrush(color2);
     painter.save();
     painter.rotate(6.0 * time.second());
     painter.drawConvexPolygon(secondHand,4);
     painter.restore();

}

dialog.h的代码

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

QT_BEGIN_NAMESPACE
namespace Ui { class Dialog; }
QT_END_NAMESPACE

class Dialog : public QDialog
{
    Q_OBJECT


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

    void paintEvent(QPaintEvent*event);
private:
    int rotate;
    Ui::Dialog *ui;
};
#endif // DIALOG_H

最终的效果图

QPainter类的具体绘制用法在此有更多讲解

R.G.B颜色对照表