用Qt做一个漂亮的时钟

最新推荐文章于 2024-04-30 10:58:48 发布
最新推荐文章于 2024-04-30 10:58:48 发布
阅读量2.1k 收藏 34
点赞数 7
分类专栏： Qt制作时钟 QPainter 文章标签： qt 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mudong_mo/article/details/106353626
版权

目录

做出来的时钟的效果图

时钟获取电脑时间，每秒动一次
在这里插入图片描述

时钟实现原理

钟表的实现需要设置定时器，定时器每隔一秒发送timeout()信号到QWidget::update()槽函数，update()槽函数将会重绘一次窗口，重写重绘事件函数paintEvent(QPaintEvent *event)，根据获取的当前系统时间的时钟、分钟、秒钟重绘钟表的时针、分针、秒针。

实现步骤

新建工程

正常地新建一个工程，模板选择Qt Widgets Application，工程名任起，不要出现中文，Details中选择三种都可以，这里选择MainWindow在这里插入图片描述在这里插入图片描述

添加资源文件

先找到刚刚建好的工程文件夹，新建文件夹，并将用作时钟背景的图片保存在此文件夹中，注意文件夹和图片的名称都不要使用中文Pixiv画师 Sul作品 https://www.pixiv.net/artworks/81060761
在新建文件或项目中选择新建文件Qt Resourse File，在资源编辑器中Add Files将图片加入，并将资源路径复制到剪贴板，可以先粘贴到记事本中或word中以供备用在这里插入图片描述

将图片放入窗口

代码：

// mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPaintEvent>


QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE


class MainWindow : public QMainWindow
{
    Q_OBJECT


public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    
    void paintEvent(QPaintEvent * event);//绘图事件
    
private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H


// mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPainter>


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    setWindowTitle("Clock");//窗口标题
    setWindowIcon(QIcon("://jpg/Sul 01.jpg"));//资源路径
    resize(1200,1063);//参考图片分辨率
}


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


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

    QPixmap map("://jpg/Sul 01.jpg");//资源路径

    QRect q(0,0,1200,1063);//参考图片分辨率

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

    painter.drawPixmap(q2,map,q);


}

效果图
在这里插入图片描述

绘制指针和表盘

代码：

// mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPen>
#include <QFont>
#include <QPaintEvent>


QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

    void paintEvent(QPaintEvent * event);

private:
    Ui::MainWindow *ui;

    static const QPoint hourHand[4];
    static const QPoint minuteHand[4];
    static const QPoint secondHand[4];
    QPen hourHandPen;
    QPen minuteHandPen;
    QFont font;

    void gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight);


protected:
     void drawClockDial(QPainter *painter);
};
#endif // MAINWINDOW_H


// mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPainter>
#include <QRadialGradient>
#include <QPainterPath>




MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    setWindowTitle("Clock");
    setWindowIcon(QIcon("://jpg/Sul 01.jpg"));
    resize(1200,1063);

    font.setPointSize(16);//数字字号
    font.setFamily("华文行楷");
    font.setBold(false);//不加粗
    setFont(font);
}


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

//指针初始位置指向0点，即y轴负方向
//通过确定四个点的位置，用drawConvexPolygon（）函数绘制四边形
const QPoint MainWindow::hourHand[4] = {
    QPoint(10, 4),
    QPoint(0, -15),
    QPoint(-10, 4),
    QPoint(0, -65)
        };


const QPoint MainWindow::minuteHand[4] = {
    QPoint(6, 5),
    QPoint(0, -20),
    QPoint(-6, 5),
    QPoint(0, -120)
        };


const QPoint MainWindow::secondHand[4] = {
    QPoint(4, 5),
    QPoint(0, 20),
    QPoint(-4, 5),
    QPoint(0, -180)
        };


void MainWindow::drawClockDial(QPainter *painter)
{
    QPen pen1;
    pen1.setWidth(4);//笔宽
    pen1.setColor(qRgb(204,197,193));//笔的颜色
    hourHandPen = pen1;

    QPen pen2;
    pen2.setWidth(2);
    pen2.setColor(qRgb(220,195,195));
    minuteHandPen = pen2;

     for (int i = 1; i <=60; ++i)
    {
        painter->save();
        painter->rotate(6*i);
        if (i % 5 == 0)
        {
            painter->setPen(hourHandPen);
            painter->drawLine(0, -190, 0, -170);


            painter->setPen(qRgb(220,195,195));
            painter->drawText(-20, -165, 40, 40,
              Qt::AlignHCenter | Qt::AlignTop,QString::number(i/5));
        }
        else
        {
            painter->setPen(minuteHandPen);
            painter->drawLine(0, -190, 0, -175);
        }
        painter->restore();
    }
}


void MainWindow::gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight) {
    QRadialGradient gradient(0, 0, radius);
    gradient.setColorAt(0, qRgb(255,225,255));
    painter->setBrush(gradient);


    QRectF rect(-radius, -radius, radius<<1, radius<<1);
    QPainterPath path;
    path.arcTo(rect, startAngle, angleLength);


    QPainterPath subPath;
    subPath.addEllipse(rect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));
    path -= subPath;


    painter->setPen(Qt::NoPen);
    painter->drawPath(path);
}




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

    QPixmap map("://jpg/Sul 01.jpg");

    QRect q(0,0,1200,1063);

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

    painter.drawPixmap(q2,map,q);

    painter.setRenderHint(QPainter::Antialiasing,true);

    int radius = 10;
    int arcHeight = 5;

    painter.translate(800,200);//将坐标轴移动到合适位置


    gradientArc(&painter, radius, 0, 360, arcHeight);


    painter.setBrush(Qt::black);
    painter.setPen(Qt::white);
    painter.drawConvexPolygon(hourHand,4);//绘制时针


    painter.setBrush(Qt::black);
    painter.setPen(Qt::white);
    painter.drawConvexPolygon(minuteHand,4);//绘制分针


    painter.setBrush(Qt::black);
    painter.setPen(Qt::white);
    painter.drawConvexPolygon(secondHand,4);//绘制秒针


    drawClockDial(&painter);//坐标轴复位


}

效果图
在这里插入图片描述

让时钟动起来（重绘时钟）

代码：

// mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPen>
#include <QFont>
#include <QPaintEvent>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE


class MainWindow : public QMainWindow
{
    Q_OBJECT


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

    void paintEvent(QPaintEvent * event);

private:
    Ui::MainWindow *ui;


    static const QPoint hourHand[4];
    static const QPoint minuteHand[4];
    static const QPoint secondHand[4];
    QPen hourHandPen;
    QPen minuteHandPen;
    QFont font;


    void gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight);


protected:
    void drawHourHand(QPainter *painter);
    void drawMinuteHand(QPainter *painter);
    void drawsecondHand(QPainter *painter);
    void drawClockDial(QPainter *painter);
};
#endif // MAINWINDOW_H


//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPainter>
#include <QRadialGradient>
#include <QPainterPath>
#include <QTimer>
#include <QTime>


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    setWindowTitle("Clock");
    setWindowIcon(QIcon("://jpg/Sul 01.jpg"));
    resize(1200,1063);


    font.setPointSize(16);
    font.setFamily("华文行楷");
    font.setBold(false);
    setFont(font);


    QTimer *timer = new QTimer(this);
    timer->start(1000);//一秒钟
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));//详见时钟实现原理
}


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


const QPoint MainWindow::hourHand[4] = {
    QPoint(10, 4),
    QPoint(0, -15),
    QPoint(-10, 4),
    QPoint(0, -65)
        };


const QPoint MainWindow::minuteHand[4] = {
    QPoint(6, 5),
    QPoint(0, -20),
    QPoint(-6, 5),
    QPoint(0, -120)
        };


const QPoint MainWindow::secondHand[4] = {
    QPoint(4, 5),
    QPoint(0, 20),
    QPoint(-4, 5),
    QPoint(0, -180)
        };


void MainWindow::drawHourHand(QPainter *painter)
{
    QTime time = QTime::currentTime();//获取时间
    QRadialGradient gradient(225,210,210);
    gradient.setColorAt(0, qRgb(225,210,210));
    painter->setBrush(gradient);//重绘的指针颜色
    painter->setPen(qRgb(215,180,180));//指针边界颜色
    painter->save();//保存坐标
    painter->rotate(30.0*(time.hour()+time.minute()/60.0));//偏移角度
    painter->drawConvexPolygon(hourHand,4);//绘制时针
    painter->restore();//坐标复位
}


void MainWindow::drawMinuteHand(QPainter *painter)
{
    QTime time = QTime::currentTime();
    QRadialGradient gradient(225,220,220);
    gradient.setColorAt(0, qRgb(225,220,220));
    painter->setBrush(gradient);
    painter->setPen(qRgb(215,180,180));
    painter->save();
    painter->rotate(6.0*(time.minute()+time.second()/60.0));
    painter->drawConvexPolygon(minuteHand,4);
    painter->restore();
}


void MainWindow::drawsecondHand(QPainter *painter)
{
    QTime time = QTime::currentTime();
    QRadialGradient gradient(225,230,230);
    gradient.setColorAt(0, qRgb(225,230,230));
    painter->setBrush(gradient);
    painter->setPen(qRgb(215,180,180));
    painter->save();
    painter->rotate(6.0*time.second());
    painter->drawConvexPolygon(secondHand,4);
    painter->restore();
}




void MainWindow::drawClockDial(QPainter *painter)
{
    QPen pen1;
    pen1.setWidth(4);
    pen1.setColor(qRgb(204,197,193));
    hourHandPen = pen1;

    QPen pen2;
    pen2.setWidth(2);
    pen2.setColor(qRgb(220,195,195));
    minuteHandPen = pen2;

     for (int i = 1; i <=60; ++i)
    {
        painter->save();
        painter->rotate(6*i);
        if (i % 5 == 0)
        {
            painter->setPen(hourHandPen);
            painter->drawLine(0, -190, 0, -170);


            painter->setPen(qRgb(220,195,195));
            painter->drawText(-20, -165, 40, 40,
              Qt::AlignHCenter | Qt::AlignTop,QString::number(i/5));
        }
        else
        {
            painter->setPen(minuteHandPen);
            painter->drawLine(0, -190, 0, -175);
        }
        painter->restore();
    }
}


void MainWindow::gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight) {
    QRadialGradient gradient(0, 0, radius);
    gradient.setColorAt(0, qRgb(255,225,255));
    painter->setBrush(gradient);


    QRectF rect(-radius, -radius, radius<<1, radius<<1);
    QPainterPath path;
    path.arcTo(rect, startAngle, angleLength);


    QPainterPath subPath;
    subPath.addEllipse(rect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));
    path -= subPath;


    painter->setPen(Qt::NoPen);
    painter->drawPath(path);
}




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

    QPixmap map("://jpg/Sul 01.jpg");

    QRect q(0,0,1200,1063);

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

    painter.drawPixmap(q2,map,q);

   painter.setRenderHint(QPainter::Antialiasing,true);

    int radius = 10;
    int arcHeight = 5;

    painter.save();
    painter.translate(800,200);

    gradientArc(&painter, radius, 0, 360, arcHeight);

//    painter.setBrush(Qt::black);
//    painter.setPen(Qt::white);
//    painter.drawConvexPolygon(hourHand,4);//绘制时针


//    painter.setBrush(Qt::black);
//    painter.setPen(Qt::white);
//    painter.drawConvexPolygon(minuteHand,4);//绘制分针


//    painter.setBrush(Qt::black);
//    painter.setPen(Qt::white);
//    painter.drawConvexPolygon(secondHand,4);//绘制秒针

    drawClockDial(&painter);
    drawHourHand(&painter);
    drawMinuteHand(&painter);
    drawsecondHand(&painter);

    painter.restore();
}

效果图：
在这里插入图片描述
至此，时钟制作完毕

参考：

QT开发（十六）——QT绘图实例-钟表

引用：

Piniv Sul かぐや様 id=81060761 （https://www.pixiv.net/artworks/81060761）

Mudong_mo
关注
  • 7
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
QT入门开发一个时钟
啊渊的专栏
11-22 3166
本文讲述了时钟开发的具体过程以及代码。 涉及到一下几个知识点： 1. 定时器使用 2. 本地时间获取 3. resource资源读取 4. 图片绘制 5. 图片按照中心旋转 6. sin或者cos角度计算。
使用Qt绘图制作一个钟表
qq_45809212的博客
05-29 1122
使用Qt绘图制作一个钟表 实际效果如下： 一、钟表实现的大概思路 设置定时器，定时器每隔一秒调用repaint()函数，paintEvent()函数随即被调用，利用paintEvent()函数重绘钟表，以秒为单位显示时钟表盘指针的变化。根据获取的当前系统时间的时钟，分钟以及秒钟的数据来绘制钟表的时针，分针以及秒针。paintEvent()函数里有涉及重绘需要调用的函数有四个，分别是重绘表盘函数，重绘时针函数，重绘分针函数以及重绘秒针函数。 二、重绘函数 因为有图形绕点旋转的情况，这里需要使用transla
Qt实现指针式时钟 Qt实现动态时钟
12-17
本文实例为大家分享了Qt实现指针式时钟、动态时钟的具体代码，供大家参考，具体内容如下 先上图： 点击运行后首先是一个指针式时钟窗口，点击Digital Clock->可以跳转到数字时钟窗口，再点击Move Clock->可以还原为指针式时钟窗口 关于整个程序的讲解都在代码注释中给出，很详细~ 概要： 我设计两个窗口，一个主窗口一个子窗口，利用按钮+信号与槽机制，实现两个窗口的互相切换，其中主窗口用来显示指针时钟，完成三个基本要求： 1、正确显示系统时钟； 2、能准确定位时钟刻度和时分秒针的位置； 3、能随窗口大小的变化而变化；  关于主窗口的实现，首先利用Qt自带的时间函数QTime::c
Qt绘制同心圆示例
Qt君
03-25 3773
利用QPainter与QPainterPath绘制同心圆。 使用addEllipse绘制外圆与内圆; setRenderHint(QPainter::Antialiasing)抗锯齿渲染。 QPainter painter(this); QPainterPath path; path.addEllipse(0, 0, 200, 200); path.addEllipse(50, 50, ...
QT-实现实时时间、计时器
weixin_48444982的博客
04-30 1113
1.显示实时时间2.实现计时、暂停、重置、打点。
QT时钟制作
qq_49516462的博客
12-22 1099
在这篇文章中，我们将学习如何使用QT框架创建一个简单的时钟应用程序。时钟应用程序显示当前的时间，并且可以根据用户的设置进行更新。
用Qt完成刻度时钟
Miki6789的博客
02-10 413
用Qt完成刻度时钟
QT 写出来的漂亮时钟界面
09-06
在本项目中，“QT 写出来的漂亮时钟界面”正是利用了QT库来设计和实现一个具有视觉吸引力的时钟应用。 1. **QT库基础**：QT库的核心在于其事件驱动模型，通过信号与槽机制实现组件间的通信。信号表示组件状态的变化...
Qt绘制一个圆形的时钟
最新发布
07-11
一个基于Qt的时钟绘制代码。简单美丽，继承自QWidget的ClockWidget，用timer调用update刷新，然后使用paintEvent作画就行了
QT做的一个简易时钟
03-04
在本项目中，我们看到的是使用QT构建的一个简单的时钟应用。 这个"QT做的一个简易时钟"项目，其核心是利用了QT中的QPainter类。QPainter是QT图形视图框架的一部分，主要用于进行图形绘制，包括线条、曲线、文本、...
qt实现一个简陋的时钟
10-19
c++中用qt实现一个简单的跑动时钟，主要用绘图事件画出时分秒的关系
Qt.zip_qt时钟dialog
09-23
【Qt时钟dialog】是一个基于Qt库开发的对话框应用，用于显示和可能与系统时间交互的时钟界面。在本文中，我们将深入探讨Qt库，对话框（Dialog）的概念，以及如何使用Qt来创建一个时钟应用。 Qt是一个跨平台的C++...
QT中QPainterPath类的功能和使用方法
热门推荐
viclee
10-18 2万+
<br />用途：它是由一些图形如曲线、矩形、椭圆组成的对象。主要的用途是，能保存已经绘制好的图形。实现图形元素的构造和复用；图形状只需创建一次，然后调用QPainter::drawPath()函数多次绘制。painterpath可以加入闭合或不闭合的图形(如：矩形、椭圆和曲线)。QPainterPath 可用于填充，描边，clipping。<br />使用方法：QPainterPath一旦创建，直线和曲线都可以被添加入path，通过lineTo(),arcTo(),cubicTo()和 quadTo()函
【Qt】创建一个访问系统时间的虚拟钟表表盘（开源）
Evenurs的url
07-31 1061
开源关于使用Qt创建独立窗口虚拟时钟表盘的源码
【QT实战一二一】QPainter绘制时钟（二）
点云兔子的博客
03-14 464
接上一篇添加链接描述 QPainter时钟的绘制（二）简介成品展示 简介 利用QPainter 和QTimer 来实现精美的数字时钟。 QPainter 提供了 2D 绘图的常用操作，QTimer 提供了定时器功能，将两者相结合，绘制一个特效精美的指针式时钟。 通过使用 QTimer 定时刷新，设置时间为 1000 毫秒（1 秒）。 通过 paintEvent() 实现指针刻度以及背景的绘制，包括：时针、分针、秒针、及面板、表盘等。 成品展示 选择界面 可选择时钟的大小以及风格， 点击OK按钮选择界面消失，
Qt绘制指针时钟
qq_25549309的博客
07-11 565
Qt是一款跨平台的C++应用程序开发框架，它提供了一套完整的工具和库，可以帮助开发者快速构建高质量的应用程序。Qt支持多种操作系统和开发语言，包括Windows、Linux、macOS、Android、iOS等，同时也支持C++、Python、JavaScript等多种编程语言。
QT自定义控件--时钟
贝勒里恩的博客
03-20 3893
注：由于本人绘图刚刚开始学，所以还存在一些瑕疵，但是对于小白入门QT绘图还是很有帮助的。 一、效果展示 二、绘制原理详解 1、绘制时钟盘 首先我们需要确定绘制一个时钟表盘需要哪些参数，在此我把黑色圆环称为外部，白色圆称为内部。绘制时钟表盘我们需要确定时钟的中心（Center_pos）、外部表盘的半径（R_Edge）、内部表盘的半径（R_Inside）、圆心指针端点小圆半径（R_Pointer）...
Qt之绘制时钟
weixin_33695450的博客
07-29 1219
简述 QPainter 提供了 2D 绘图的常用操作，QTimer 提供了定时器功能，将两者相结合，可以做出很多的自定义特效绘制。 下面，来实现一个每天都要接触的东西 - 时钟。包含了常见的所有功能：时针、分针、秒针。。。 简述 实现方式 示例 效果 源码 实现方式 由于时钟是妙级更新的，所以我们需要...
Qt实现日期时间日历显示
lmmy的博客
08-18 1万+
今天继续学习《Qt实战一二三》，@博主一去丶二三里 Qt之QDateTime https://blog.csdn.net/liang19890820/article/details/52387275 记得加上布局就没问题了！ 另外加上@博主一去丶二三里 https://blog.csdn.net/liang19890820/article/details/52400160 分享的Q...
qtc++做一个可调时钟
09-13
总的来说，要做一个可调时钟，我们需要使用 QTC 操作系统进行开发，并结合定时器、任务调度和图形库等功能来实现时钟的基本功能和用户界面。这样，用户就可以通过界面来调整时间、设置闹铃等操作了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值