QT—class3 绘制时钟（电子+钟表）附代码

最新推荐文章于 2024-09-11 19:50:40 发布
最新推荐文章于 2024-09-11 19:50:40 发布
阅读量890 收藏 4
点赞数 1
分类专栏： QT学习之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45864632/article/details/106335804
版权

绘制时钟

绘制时钟（电子+钟表）

前言

确实参考了很多资料才做出来，我尽量把那些资料没有说明详细的地方补充完整~

一、效果展示

大致是这样的效果~喜欢看球，所以选了利指导的读表时刻 ~
不是很精致~
在这里插入图片描述

二、绘制时针、分针、秒针

逐步解读

  • QTime time=QTime::currentTime()
    返回系统时钟报告的当前时间。

  • painter->save();
    { }
    painter->restore();
    QPainter是一个状态机。那么，有时我想保存下当前的状态：当我临时绘制某些图像时，就可能想这么做。当然，我们有最原始的办法：将可能改变的状态，比如画笔颜色、粗细等，在临时绘制结束之后再全部恢复。对此，QPainter提供了内置的函数：save()和restore()。save()就是保存下当前状态；restore()则恢复上一次保存的结果。这两个函数必须成对出现：QPainter使用栈来保存数据，每一次save()，将当前状态压入栈顶，restore()则弹出栈顶进行恢复。

  • painter->rotate(度数）。

  • painter->drawConvexPolygon（）画指针的函数，这里是画一个多边形指针。一开始得构建几个点来绘图，我试了下，感觉参数都不重要，随便几个点甚至点的个数都可以不确定，就只有些许粗细长短之分。

const QPoint Widget::hourhand[4]={
     QPoint(5,5),QPoint(0,13),QPoint(-5,5),QPoint(0,-40)
};
const QPoint Widget::minutehand[4]={
     QPoint(3,5),QPoint(0,16),QPoint(-3,5),QPoint(0,-70)
};
const QPoint Widget::secondhand[4]={
     QPoint(0,0),QPoint(0,0),QPoint(0,0),QPoint(0,0)
};
  • painter.setRenderHint(QPainter::Antialiasing,true);这是个反走样的函数，就去指针的边缘化。我也不是很懂~。
    *这个部分找了很多资料才理解，看帮助也不是太懂哈~ painter.setWindow（rect（））就是选择要放大的区域原本是多大。
  • painter.setViewport(96,0,side,side);//映射到新的区域面积多大
    painter.setWindow(0,0,230,230);//原本截取放大的面积区域多大
    painter.setViewport(96,0,side,side);//映射到新的区域面积多大
  • 因为原本圆心部位画的图只能展示出一部分，要把圆心重新设置
 painter.translate(100,100);;//重新设定坐标原点
  • 这部分主要代码

void Widget::drawhourhand(QPainter*painter)
{
    QTime time=QTime::currentTime();
    painter->setBrush(Qt::blue);//画刷，填充
    painter->setPen(Qt::Dense7Pattern);//画笔，制作廓线
    painter->save();
    painter->rotate(30.0*(time.hour()+time.minute()/60));//使得指针旋转到当前时间位置
    painter->drawConvexPolygon(hourhand,4);;//绘制时针（凸多边形）
    painter->restore();//与save连着用 绘制图形后复位坐标系
}
void Widget::drawminutehand(QPainter*painter)
{
    QTime time=QTime::currentTime();
    painter->setBrush(Qt::white);
    painter->setPen(Qt::Dense5Pattern);
    painter->save();
    painter->rotate(6.0*(time.minute()+time.second()/60.0));
    painter->drawConvexPolygon(minutehand,4);
    painter->restore();
}
void Widget::drawsecondhand(QPainter*painter)
{
    QTime time=QTime::currentTime();
    painter->setBrush(Qt::red);
    painter->setPen(Qt::Dense5Pattern);
    painter->save();
    painter->rotate(6*time.second());
    painter->drawPolygon(minutehand,4);
    painter->restore();
}

三、绘制表盘

逐步解读
  • 一开始先设置QPen 两个笔一个笔专门来画每小时的大粗线，另一个画细线。
  • Qt::AlignHCenter|Qt::AlignTop 文字位置，正底下。
  • 同样要save 和restore保存恢复
  • 主要代码
void Widget::drawclockdial(QPainter*painter)
{
    hourhandpen.setColor(Qt::white);
    hourhandpen.setWidth(2.0);//设置小时刻度线为粗黑
    minutehandpen.setColor(Qt::white);
    for(int i=1;i<=60;i++)
    {
        painter->save();
        painter->rotate(6*i);
        if(i%5==0)
        {
            painter->setPen(hourhandpen);
            painter->drawLine(0,-98,0,-82);
            painter->drawText(-20,-82,40,40,Qt::AlignHCenter|Qt::AlignTop,QString::number(i/5));
        }
        else
        {
            painter->setPen(minutehandpen);
            painter->drawLine(0,-98,0,-88);
        }
        painter->restore();
    }
}

三、绘制电子时钟

*实现代码

 QString timeStr= QTime::currentTime().toString();     //绘制当前的电子时间
    painter.setPen(Qt::white);
    painter.drawText(-20,30,80,30,0,timeStr);

四、实现界面刷新（时间走动）

*信号槽机制

    QTimer*timer=new QTimer(this);
    timer->start(1000);
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));

五、字体设置

  • 稍微提一下这个QFont头文件专门设置字体的
    font.setPixelSize(10);
    setFont(font);

五、易错点归纳

  • QTimer 和 QTime两个头文件一个是时钟触发器用来刷新界面使得指针转动，另一个是获取系统时间的头文件
  • 要先确立放大区域和重新确定原点再来以此为基础绘制。
#include "widget.h"
#include "ui_widget.h"


Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    font.setPixelSize(10);
    setFont(font);
    setWindowTitle("THE CLOCK");
    resize(1200,820);
}


Widget::~Widget()
{
    delete ui;
}
const QPoint Widget::hourhand[4]={
     QPoint(5,5),QPoint(0,13),QPoint(-5,5),QPoint(0,-40)
};
const QPoint Widget::minutehand[4]={
     QPoint(3,5),QPoint(0,16),QPoint(-3,5),QPoint(0,-70)
};
const QPoint Widget::secondhand[4]={
     QPoint(0,0),QPoint(0,0),QPoint(0,0),QPoint(0,0)
};
void Widget::drawhourhand(QPainter*painter)
{
    QTime time=QTime::currentTime();
    painter->setBrush(Qt::blue);//画刷，填充
    painter->setPen(Qt::Dense7Pattern);//画笔，制作廓线
    painter->save();
    painter->rotate(30.0*(time.hour()+time.minute()/60));//使得指针旋转到当前时间位置
    painter->drawConvexPolygon(hourhand,4);;//绘制时针（凸多边形）
    painter->restore();//与save连着用 绘制图形后复位坐标系
}
void Widget::drawminutehand(QPainter*painter)
{
    QTime time=QTime::currentTime();
    painter->setBrush(Qt::white);
    painter->setPen(Qt::Dense5Pattern);
    painter->save();
    painter->rotate(6.0*(time.minute()+time.second()/60.0));
    painter->drawConvexPolygon(minutehand,4);
    painter->restore();
}
void Widget::drawsecondhand(QPainter*painter)
{
    QTime time=QTime::currentTime();
    painter->setBrush(Qt::red);
    painter->setPen(Qt::Dense5Pattern);
    painter->save();
    painter->rotate(6.0*time.second());
    painter->drawPolygon(minutehand,4);
    painter->restore();
}
void Widget::paintEvent(QPaintEvent*event)
{
    QPainter painter(this);
    QTimer*timer=new QTimer(this);
    timer->start(1000);
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));
    QPixmap map(":/new/prefix1/timg (1).jfif");
    QRect q(0,0,1200,800);//截取这么大的面积
    QRect q2(0,0,width(),height());//放到指定大小的框中
    painter.drawPixmap(q2,map,q);
    painter.setRenderHint(QPainter::Antialiasing,true);//反走样
    int side=qMin(width(),height());
    painter.setWindow(0,0,230,230);//原本截取放大的面积区域多大
    painter.setViewport(96,0,side,side);//映射到新的区域面积多大
    painter.translate(100,100);//重新设定坐标原点
    drawhourhand(&painter);
    drawminutehand(&painter);
    drawsecondhand(&painter);
    drawclockdial(&painter);
    QString timeStr= QTime::currentTime().toString();     //绘制当前的电子时间
    painter.setPen(Qt::white);
    painter.drawText(-20,30,80,30,0,timeStr);
    painter.setBrush(Qt::black);
    painter.drawEllipse(QPoint(0,0),3,3);//中间画个小圆点
   // QTransform Transform;
   // Transform.rotate(90);
   // painter.setTransform(Transform);
    painter.drawText(-53,-30,QStringLiteral("老子利指导，杀人先看表"));
}
void Widget::drawclockdial(QPainter*painter)
{
    hourhandpen.setColor(Qt::white);
    hourhandpen.setWidth(2.0);//设置小时刻度线为粗黑
    minutehandpen.setColor(Qt::white);
    for(int i=1;i<=60;i++)
    {
        painter->save();
        painter->rotate(6*i);
        if(i%5==0)
        {
            painter->setPen(hourhandpen);
            painter->drawLine(0,-98,0,-82);//原点变了
            painter->drawText(-20,-82,40,40,Qt::AlignHCenter|Qt::AlignTop,QString::number(i/5));
        }
        else
        {
            painter->setPen(minutehandpen);
            painter->drawLine(0,-98,0,-88);
        }
        painter->restore();
    }
}
QT实现绘制时钟（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-11 261
QT实现绘制时钟（附完整源码）
Qt之有趣的数字钟
草上爬的博客
01-09 2872
Qt之有趣的数字钟：基于网络代码修改，支持时、分、秒；支持滑动、翻页和旋转。
Qt实战案例（2）——电子时钟的设计
Wendy的博客
09-03 3348
目录一、项目介绍二、项目基本配置三、UI界面设计四、主程序实现4.1 添加新文件4.2 digiclock.h头文件4.3 digiclock.cpp源文件4.4 main.cpp源文件五、效果演示 一、项目介绍 利用Qt实现显示与桌面上并可以随意拖拽至桌面任意位置的电子时钟案例。 二、项目基本配置 新建一个Qt案例，项目名称为“Clock”，基类选择“QDialog”，取消创建UI界面复选框的选中状态。 三、UI界面设计 无UI界面 四、主程序实现 4.1 添加新文件 添加新文件： 选择“C++ C
Qt - 与众不同的电子时钟
beifenggo
09-04 255
Qt的电子时钟是个老掉牙的demo了，但是利用lcdNumber显示的样子非常老土（下图第一个显示效果），一看就知道是从qt帮助文档里摘出来的example，毫无新意。 美化一下系统时钟，抛开固有控件躯壳，DIY效果让人眼前一亮，要知道细节决定UI成败。这也是我一直所追求的。 思路非常简单，就是利用label或者button贴图变化显示。 一说到贴图，有人可能就会认为代...
QT实现电子时钟
ITsuperhero的博客
02-03 521
QT实现电子时钟实现方法实现效果代码头文件源文件 实现方法 主窗口QDialog调用QLCDNumber窗口 实现效果 代码 头文件 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 publ
Qt实现电子时钟
Jacksqh的博客
07-29 1018
文章目录电子时钟主要运用的方法和对象：digitalclock.hdigitalclock.cpp 电子时钟 这里主要是运用了QTimer和QLCDNumber类的用法 主要运用的方法和对象： 很多注释都在代码里了，有兴趣的同学可以瞧瞧 digitalclock.h #ifndef DIGITALCLOCK_H #define DIGITALCLOCK_H #include<QLCDNumber> class DigitalClock : public QLCDNumber { Q
Qt 之 数字钟
weixin_30530939的博客
11-18 164
本例展示了 QTimer 的使用，如何定时更新一个窗口部件 DigitalClock 1 QLCDNumber 类 QLCDNumber 是一种可将数字显示为类似 LCD 形式的窗口部件，它同 QLabel 一样，都继承自 QFrame，而 QFrame 继承自 QWidget 头文件 digitalclock.h 1 #include <QLCDNumber&g...
【QT】自制一个简单的时钟（跟随系统时间）
最新发布
2301_77133426的博客
09-11 956
使用QT完成一个简单的时钟图形化界面，功能是完成了时分秒指针能够跟随系统时间移动设计思路：1、首先将时钟的边框绘制出来2、定义出一个定时器t1，将定时器连接到update_slot槽内，每次超时，就会自动调用timeout信号，用来更新当前的界面update();3、绘制时分秒，通过系统时间控制坐标的旋转，依次绘制出时间。
Qt简易时钟
qq_52808752的博客
08-27 1266
Qt简易时钟
Qt绘制简单时钟
weixin_45983038的博客
05-25 582
目录概述（1）基本原理（2）部分函数说明①调色和填充②抗锯齿（减少图形外围锯齿状，使线条平滑）③自动保存与恢复核心代码背景与效果图 概述 （1）基本原理 利用简单的几何图形绘出表盘和指针，然后基于系统时间调整指针偏转角度达到模拟时钟的效果。 其中可以加上自己喜欢的背景资源，设计不同风格的时钟。 （2）部分函数说明 ①调色和填充 painter.setBrush(Qt::red); //设置画刷，填充颜色(红色) painter.setPen(Qt::red); //设置画笔，外围轮廓颜色(红
QT 电子时钟
12-02
改程序实现现实于桌面上并可随意拖拽至桌面任意位置的电子时钟综合实例
Qt电子时钟
06-18
qt改进的电子时钟，并加上类似photoshop启动时的欢迎界面 感兴趣的可以参考
qt数字时钟
12-10
qt数字时钟qt数字时钟qt数字时钟 http://blog.csdn.net/jianchi88
Qt实现简单的电子时钟
07-15
Qt 的制作电子时钟，可显示时分秒，可随意拖拽至桌面任意位置。
【Qt作业】绘制简单的时钟
qq_45521287的博客
05-29 448
预览如下 ## 代码部分 **头文件** #ifndef CLOCK_H #define CLOCK_H #include <QWidget> #include <QPixmap> #include <QBitmap> #include <QPainter> #include <QPaintEvent> #include <QTime> #include <QPaintEvent> #include <QPaint
电子时钟QTime、QTimer、QLCDNumber
m0_46376834的博客
08-16 270
电子时钟QTime、QTimer、QLCDNumber电子时钟QTime、QTimer、QLCDNumber 电子时钟QTime、QTimer、QLCDNumber clock.h #ifndef CLOCK_H #define CLOCK_H #include <QDialog> class Clock : public QDialog { Q_OBJECT public: Clock(QWidget *parent = 0); ~Clock(); }; #en
Qt 电子时钟
weixin_45715405的博客
02-21 758
文章目录1、流程步骤1.1、构造函数代码1.2、槽函数，获取当前时间，根据标识符，控制':'显示还是隐藏1.3、鼠标按下事件1.4、鼠标移动事件 按住鼠标左键不放可通过时钟位置，鼠标右击关闭程序 代码下载： https://gitee.com/xiaozhu0809/qt-electronic-clock/tree/master/ 1、流程步骤 创建c++类，继承QLCDNumber 1.1、构造函数代码 // 调色板 QPalette p = palette(); p.
Qt:电子时钟
Ryan-专栏
07-29 902
digiclock.h #ifndef DIGICLOCK_H #define DIGICLOCK_H #include #include #include class DigiClock : public QLCDNumber { Q_OBJECT public: DigiClock(QWidget *parent =
《QT》电子时钟
qq_60071225的博客
09-03 289
功能：定时闹钟，时钟
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值