Qt：利用 #QPainter与QTimer# 制作简易时钟

Qt：利用 #绘图和定时器# 制作简易时钟

三两闲语

最近学了Qt中一些简单的2D绘画和定时器，两者结合可以作出一个简易的时钟（说是时钟，倒更像一个计时器），废话不多说，那就开始吧!

准备工作

• 构造一个定时器QTimer
• 找一张好看的有圆框的图片（如果要求不是那么高，也可不用)
• 绘画表盘，指针，时刻等（QPainter）
• 在绘画表盘刻度时，可以将刻度视为在一个圆半径上面的一小段，找到圆心坐标，使用极坐标来表示线段两端的坐标
• 如果要求美观，可改变字体，颜色之类的（QPen、QFont等）

具体相关函数在代码中都会有注释

功能实现

1、 dialog.h文件

在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);
    
    void timerEvent(QTimerEvent *event);
    int t;
    int Eventtime;

private:
    Ui::Dialog *ui;
};
#endif // DIALOG_H

2、dialog.cpp文件

(1)、头文件以及相关数据

#include "dialog.h"
#include "ui_dialog.h"
#include"QPainter"
#include"QPixmap"
#define PI 3.1415926

(2)、将之前构造的定时器类在dialog文件里实现

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::Dialog)
{
    ui->setupUi(this);
    resize(800,800);

    Eventtime=startTimer(100);//每隔100毫秒启动一次定时器
    t=0;//定时器从0开始
}
    
Dialog::~Dialog()
{
    delete ui;
}

void Dialog::timerEvent(QTimerEvent *event)
{
    t++;
    repaint()；//重绘
    
}

(3)绘制表盘、指针，刻度等
相关函数：

• paint.drawLine((x1,y1,x2,y2)or(起点，终点); //画线段；刻度
• paint.drawPolygon(点组，边数);//画多边形；指针
• paint.drawEllipse(x,y,width,height); //画椭圆、圆；表盘
  注意：此处的x、y不是圆心的坐标，而是图形外切矩形左上方顶点的坐标`

 void Dialog::paintEvent(QPaintEvent* event)
 {
     //放上框架图片
     QPixmap map(":/c/res/clock-flower.jpg");
     QPainter paint(this);
     QRect q(0,0,780,780);
     QRect q2(0,0,800,800);
     paint.drawPixmap(q2,map,q);

     //设置抗锯齿(使图形看起来更平滑)
     paint.setRenderHint(QPainter::Antialiasing);


     //绘制刻度
     for(int i=0;i<60;i++)
     {
         if(i%5==0)
         {
             //重新调整线条粗细
             QPen pen;
             pen.setWidth(4);
             paint.setPen(pen);
             paint.drawLine(406+210*cos(2*PI*i/60),395+210*sin(2*PI*i/60),406+230*cos(2*PI*i/60),395+230*sin(2*PI*i/60));
         }
         else
         {
             QColor green(0,0xFF,0);//使画笔颜色变为绿色
             QPen pen1(green);
             pen1.setWidth(2);
             paint.setPen(pen1);
             paint.drawLine(406+218*cos(2*PI*i/60),395+218*sin(2*PI*i/60),406+230*cos(2*PI*i/60),395+230*sin(2*PI*i/60));
         }
     }
     
     
     //设置字体样式
     QFont font("宋体",14,QFont::Bold,true);
     //使用字体
     paint.setFont(font);
        paint.setPen(Qt::black);
      //写上时刻
      paint.drawText(400+190*cos(2*PI*0/12-PI/2),400+190*sin(2*PI*0/12-PI/2),tr("12"));
      paint.drawText(400+190*cos(2*PI*1/12-PI/2),400+190*sin(2*PI*1/12-PI/2),tr("1"));
      paint.drawText(400+190*cos(2*PI*2/12-PI/2),400+190*sin(2*PI*2/12-PI/2),tr("2"));
      paint.drawText(400+190*cos(2*PI*3/12-PI/2),400+190*sin(2*PI*3/12-PI/2),tr("3"));
      paint.drawText(400+190*cos(2*PI*4/12-PI/2),400+190*sin(2*PI*4/12-PI/2),tr("4"));
      paint.drawText(400+190*cos(2*PI*5/12-PI/2),400+190*sin(2*PI*5/12-PI/2),tr("5"));
      paint.drawText(400+190*cos(2*PI*6/12-PI/2),400+190*sin(2*PI*6/12-PI/2),tr("6"));
      paint.drawText(400+190*cos(2*PI*7/12-PI/2),400+190*sin(2*PI*7/12-PI/2),tr("7"));
      paint.drawText(400+190*cos(2*PI*8/12-PI/2),400+190*sin(2*PI*8/12-PI/2),tr("8"));
      paint.drawText(400+190*cos(2*PI*9/12-PI/2),400+190*sin(2*PI*9/12-PI/2),tr("9"));
      paint.drawText(400+190*cos(2*PI*10/12-PI/2),400+190*sin(2*PI*10/12-PI/2),tr("10"));
      paint.drawText(400+190*cos(2*PI*11/12-PI/2),400+190*sin(2*PI*11/12-PI/2),tr("11"));


        //绘制秒针
         QPointF p1[4]=
         {
             QPointF(400+10*cos(2*PI*t/60),400+10*sin(2*PI*t/60)),
             QPointF(400+2*cos(2*PI*t/60)+230*cos(2*PI*t/60-PI/2),400+2*sin(2*PI*t/60)+230*sin(2*PI*t/60-PI/2)),
             QPointF(400-2*cos(2*PI*t/60)+230*cos(2*PI*t/60-PI/2),400-2*sin(2*PI*t/60)+230*sin(2*PI*t/60-PI/2)),
             QPointF(400-10*cos(2*PI*t/60),400-10*sin(2*PI*t/60))
         };
         paint.setBrush(Qt::cyan);
         paint.drawPolygon(p1,4);


         //绘制分针
          QPointF p2[4]=
          {
              QPointF(400+10*cos(2*PI*t/3600),400+10*sin(2*PI*t/3600)),
              QPointF(400+2*cos(2*PI*t/3600)+150*cos(2*PI*t/3600-PI/2),400+2*sin(2*PI*t/3600)+150*sin(2*PI*t/3600-PI/2)),
              QPointF(400-2*cos(2*PI*t/3600)+150*cos(2*PI*t/3600-PI/2),400-2*sin(2*PI*t/3600)+150*sin(2*PI*t/3600-PI/2)),
              QPointF(400-10*cos(2*PI*t/3600),400-10*sin(2*PI*t/3600))
          };
          paint.setBrush(Qt::yellow);
          paint.drawPolygon(p2,4);


          //绘制时针
          QPointF p3[4]={
              QPointF(400+10*cos(2*PI*t/43200),400+10*sin(2*PI*t/43200)),
              QPointF(400+2*cos(2*PI*t/43200)+60*cos=(2*PI*t/43200-PI/2),400+2*sin(2*PI*t/43200)+60*sin(2*PI*t/43200-PI/2)),
              QPointF(400-2*cos(2*PI*t/43200)+60*cos(2*PI*t/43200-PI/2),400-2*sin(2*PI*t/43200)+60*sin(2*PI*t/43200-PI/2)),
              QPointF(400-10*cos(2*PI*t/43200),400-10*sin(2*PI*t/43200))
          };
          paint.setBrush(Qt::magenta);
          paint.drawPolygon(p3,4);
 }

运行效果

学习心得

1、若想深入了解代码里面使用到的QPainter、QFont、QColor等的更多用法，可上百度云搜索Qt绘图详解
2、QPointF与QPoint的区别：前者的值是float型，后者是int型（其他类似的类型也一样）
3、项目文件以及资源文件中最好不要出现中文