Qt realizes simple dynamic clock

The example in this article shares the specific code of Qt implementing a simple dynamic clock for your reference. The specific content is as follows

Task fulfillment:

Implement a simple dynamic clock using timers through the Qt language;

Realize the effect:

The benefits of this article, free to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project actual combat, QSS, OpenCV, Quick module, interview questions, etc.) ↓↓↓↓↓↓See below↓↓Click on the bottom of the article to receive the fee↓↓

Implementation process:

The overall process is mainly divided into two parts:

1. Elements needed to draw a dial: hour, minute, second hand, scale, you can also insert a background image of the clock face;
2. Let the drawn pointer move (use the timer and associate the system time);

Overall code:

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);


  void drawSecond(QPainter *painter);


  void drawMinute(QPainter *painter);


  void drawHour(QPainter *painter);


  void drawClock(QPainter *painter);


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

dialog.cpp

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



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


  resize(959,959);


  setWindowTitle("My Clock");


  QTimer *timer = new QTimer(this);


  timer->start(1000);


  //信号的链接
  connect(timer,SIGNAL(timeout()),this,SLOT(update()));


}


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



void Dialog::paintEvent(QPaintEvent *event)
{
  QPainter painter(this);


  QPixmap map(":/Resrouse/Pic.jpg");


  QRect q(0,0,959,959);


  QRect q2(0,0,width(),height());



  painter.drawPixmap(q2,map,q);


  //防止图形走样
  painter.setRenderHint(QPainter::Antialiasing,true);


  //使得窗口可调节，图形随之变形
  painter.setWindow(0,0,200,200);


  //重新设置坐标轴的原点位置
  painter.translate(100,100);



  //调用绘制图像函数，分别绘制时分秒
  drawClock(&painter);
  drawSecond(&painter);
  drawMinute(&painter);
  drawHour(&painter);


}


void Dialog::drawSecond(QPainter *painter)
{


  static const QPoint Second[4]=
  {
    QPoint(2, 5),
    QPoint(0, 18),
    QPoint(-2, 5),
    QPoint(0, -90)
  };


  //获取当前系统时间currentTime();
  QTime time = QTime::currentTime();


  //设置绘制颜色
  painter->setBrush(Qt::red);
  painter->setPen(Qt::red);


  //save进行保存
  painter->save();


  //完成绘制（时间换算倾斜角度）
  painter->rotate(6.0*time.second());
  painter->drawConvexPolygon(Second,4);


  //ratate进行复位
  painter->restore();

}


void Dialog::drawMinute(QPainter *painter)
{

  static const QPoint Minute[4]=
  {
    QPoint(2, 5),
    QPoint(0, 16),
    QPoint(-2, 5),
    QPoint(0, -70)
  };


  QTime time = QTime::currentTime();



  painter->setBrush(Qt::blue);
  painter->setPen(Qt::blue);



  painter->save();



  painter->rotate(6.0*(time.minute()+time.second()/60.0));
  painter->drawConvexPolygon(Minute,4);


  painter->restore();


}


void Dialog::drawHour(QPainter *painter)
{
  static const QPoint Hour[4]=
  {
    QPoint(2, 5),
    QPoint(0, 13),
    QPoint(-2, 5),
    QPoint(0, -40)
  };


  QTime time = QTime::currentTime();


  painter->setBrush(Qt::yellow);
  painter->setPen(Qt::yellow);


  painter->save();


  painter->rotate(30.0*(time.hour()+time.minute()/60.0));
  painter->drawConvexPolygon(Hour,4);


  painter->restore();


}


void Dialog::drawClock(QPainter *painter)
{
  QPen pen;


  pen.setWidth(2);


  pen.setColor(Qt::white);


  painter->setPen(pen);


  //绘制钟表刻度盘和数字
  for (int i = 1; i <=60; ++i)
  {

    painter->save();

    painter->rotate(6*i);//坐标轴旋转6度

    //分别绘制长短线
    if (i % 5 == 0)
    {

      painter->drawLine(0, -98, 0, -82);
      painter->drawText(-20, -82, 40, 40,Qt::AlignHCenter | Qt::AlignTop,QString::number(i/5));
    }
    else
    {

      painter->drawLine(0, -98, 0, -88);
    }

    painter->restore();//绘制图形后复位坐标系
  }


}

Dial drawing:

Use the paintEvent() function to store the size and position of each pointer in the form of a structure and draw it;
the following uses the drawing of the second hand as an example:

void Dialog::drawSecond(QPainter *painter)
{

  static const QPoint Second[4]=
  {
    QPoint(3, 5),
    QPoint(0, 18),
    QPoint(-3, 5),
    QPoint(0, -90)
  };


  //获取当前系统时间currentTime();
  QTime time = QTime::currentTime();

  //设置绘制颜色
  painter->setBrush(Qt::red);
  painter->setPen(Qt::red);

  //save进行保存
  painter->save();

  //完成绘制（时间换算倾斜角度）
  painter->rotate(6.0*time.second());
  painter->drawConvexPolygon(Second,4);

  //ratate进行复位
  painter->restore();

}

Call time:

Set the timer time to 1000ms, which is 1s;

QTimer *timer = new QTimer(this);

timer->start(1000);

//信号的链接
connect(timer,SIGNAL(timeout()),this,SLOT(update()));

other:

1. Insertion of pictures:

The content in the map can be replaced with a resource file imported by itself

QPixmap map(":/Resrouse/Pic.jpg");

QRect q(0,0,959,959);

QRect q2(0,0,width(),height());

painter.drawPixmap(q2,map,q);

2. Paint the color change:

QPen pen;
  
//设置画笔的宽度
pen.setWidth(2); 

//设置画笔的颜色
pen.setColor(Qt::white);

//调用设置的画笔参数
painter->setPen(pen);

The benefits of this article, free to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project actual combat, QSS, OpenCV, Quick module, interview questions, etc.) ↓↓↓↓↓↓See below↓↓Click on the bottom of the article to receive the fee↓↓

Qt realizes simple dynamic clock

Guess you like