目录
使用QT完成一个简单的时钟图形化界面,功能是完成了时分秒指针能够跟随系统时间移动
设计思路:
1、首先将时钟的边框绘制出来
2、定义出一个定时器t1,将定时器连接到update_slot槽内,每次超时,就会自动调用timeout信号,用来更新当前的界面update();
3、绘制时分秒,通过系统时间控制坐标的旋转,依次绘制出时间
源代码:
widegt.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
#include <QTimer>
#include <QPainter> //画家类
#include <QPaintEvent> //绘制事件类
#include <QPen>
#include <QFont>
#include <QTime>
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
//重写自己的绘制事件处理函数
void paintEvent(QPaintEvent *event) override;
void drawClockDial(QPainter *painter); //绘制圆内里面的时刻标志
public slots:
void update_slot(); //自定义槽函数用来处理计时器超时
private:
Ui::Widget *ui;
QTimer t1; //定义一个计时器
};
#endif // WIDGET_H
main.cpp
#include "widget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Widget w;
w.show();
return a.exec();
}
widegt.cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 1. 连接定时器信号到 update() 槽
connect(&t1, &QTimer::timeout, this, &Widget::update_slot);
// 2. 启动定时器,每1000毫秒(1秒)触发一次
t1.start(1000);
// 设置窗口没有边框和标题栏
setWindowFlags(Qt::FramelessWindowHint);
// 设置窗口大小为半径的两倍(直径)
int diameter = 410; // 半径为200,直径为400
resize(diameter, diameter);
// 创建圆形遮罩
QPainterPath path;
path.addEllipse(0, 0, diameter, diameter); // 半径为宽度和高度的一半
// 设置窗口遮罩为圆形
setMask(path.toFillPolygon().toPolygon());
}
Widget::~Widget()
{
delete ui;
}
//重写自己的绘制事件处理函数
void Widget::paintEvent(QPaintEvent *event)
{
//1、实例化一个画家
QPainter painter(this);
//2、准备画笔
QPen pen;
pen.setStyle(Qt::SolidLine); //使用实线
pen.setColor("pink"); //设置画笔颜色为粉色
pen.setWidth(10); //设置画笔粗细为10
//3、给画家安排上画笔
painter.setPen(pen);
//4、设置画笔的坐标起点:在正中心
painter.translate(this->width()/2, this->height()/2);
//4、绘制一个圆
int radius = 200;
painter.drawEllipse(QPoint(0,0), radius, radius);
//5、给时钟内加上时刻标志以及数字
drawClockDial(&painter);
//6、获取当前时间
QTime time = QTime::currentTime();
// 绘制时针
painter.save();
painter.rotate(30.0 * (time.hour() + time.minute() / 60.0)); //旋转坐标角度与当前位置水平
painter.setPen(QPen(Qt::black, 10));
painter.drawLine(0, 0, 0, -70);
painter.restore();
// 绘制分针
painter.save();
painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
painter.setPen(QPen(Qt::blue, 8));
painter.drawLine(0, 0, 0, -90);
painter.restore();
// 绘制秒针
painter.save();
painter.rotate(6.0 * time.second());
painter.setPen(QPen(Qt::red, 6));
painter.drawLine(0, 0, 0, -110);
painter.restore();
}
//自定义函数,为时钟内部加上时刻标志
void Widget::drawClockDial(QPainter *painter)
{
int radius = 200; // 假设圆的半径为250
int hourTickLength = 30; // 小时刻度的长度
int minuteTickLength = 15; // 分钟刻度的长度
for(int i = 0; i < 60; ++i)
{
painter->save(); //保存一下当前界面
painter->rotate(6 * i); // 坐标轴旋转6度
// 绘制分钟刻度
painter->drawLine(0, radius - minuteTickLength, 0, radius);
//恢复绘制之前的状态
painter->restore();
if(i % 5 == 0)
{
// 绘制小时刻度
painter->save();
painter->rotate(6 * i); // 坐标轴旋转6度
painter->drawLine(0, radius - hourTickLength, 0, radius);
painter->restore();
//绘制数字
}
}
}
void Widget::update_slot()
{
update(); //更新当前页面
}
输出结果如下:
时分秒能够跟随系统时间运动,完成一个简单的时钟功能