Qt设计时钟效果

作为一位Qt的初学者,也是一位编程的小白,我今天想教大家如何使用Qt来设计一个时钟。

首先,我们要学习如何绘图——QPainter类

QPainter通常在一个窗口的重绘事件(paint event)的处理函数paintEvent中进行绘制。QPainter类常用的功能有以下几类:

1)设置绘图工具。包括设置画笔(setPen),设置画刷(setBrush),设置字体(setFont)以及设置背景(setBackgroundMode)。

2)绘制图形和文字,如图:

QPainter部分画图函数的实例:

//(1)绘制线段
painter->drawLine(20,20,100,120);
//画一条(20,20)到(100,120)的线段

//(2)绘制圆或者椭圆
painter->drawEllipse(20,20,210,160);
//第一二个参数表示椭圆外切矩形左上角的坐标,第三四个参数表示外切矩形的宽度和高度

//(3)绘制矩形
painter->drawReact(20,20,210,160);
//第一二个参数表示椭圆外切矩形左上角的坐标,第三四个参数表示矩形的宽度和高度

开始画时钟

1)新建基于MainWindow类的应用程序。
2)在.h文件中添加变量和函数声明

float radious;//时钟半径

int xSecond,ySecond,xHour,yHour,xMinute,yMinute;
int xCenter,yCenter;// 时钟中心坐标
int second,minute,hour;//时分秒的实际数字
void CalcPostion();//计算指针坐标的函数
void timerEvent(QTimerEvent*);
void paintEvent(QPaintEvent*event);
void drawClockDial(QPainter *painter);

3)在.cpp文件中添加所需的头文件,宏定义以及计算三种指针针尖坐标的函数

#include "mainwindow.h"
#include<qmath.h>
#include<QPainter>
#define PI 3.14159265
void MainWindow::CalcPostion()
{
 double minuteHandLen,secondHandLen,hourHandLen;
 secondHandLen=radious*0.8;
 minuteHandLen=radious*0.65;
 hourHandLen=radious*0.5;//时分秒针的长度
 //秒针的位置
 xSecond=xCenter+secondHandLen*cos(second*PI/30-PI/2);
 ySecond=yCenter+secondHandLen*sin(second*PI/30-PI/2);
 //分针的位置
 xMinute=xCenter+minuteHandLen*cos(minute*PI/30-PI/2);
 yMinute=xCenter+minuteHandLen*sin(minute*PI/30-PI/2);
 //时针的位置
 xHour=xCenter+hourHandLen*cos((hour+1.0*minute/60)*PI/6-PI/2);
 yHour=yCenter+hourHandLen*sin((hour+1.0*minute/60)*PI/6-PI/2);
}

4)在.cpp中的构造函数中添加初始化代码

MainWindow::MainWindow(QWidget *parent)
 : QMainWindow(parent)
{
 radious=200;//半径200
 xCenter=200;
 yCenter=200;//圆心(200,200)
 hour=3,minute=56,second=35;//初试时间3:56:35
 CalcPostion();
 startTimer(100);//方便观察,加速10倍
 resize(400,400);//窗口大小400*400
}

5)在.cpp文件中添加表盘,指针,以及进位函数

void MainWindow::timerEvent(QTimerEvent *event)
{
 CalcPostion();//计算位置
 second++;
 if(second==60)
 {
  second=0;
  minute++;
 }//分增加
 if (minute==60)
 {
  minute=0;
  hour++;
 }//时增加
 update();
}
void MainWindow::paintEvent(QPaintEvent *event)
{
 QPainter painter(this);
 QPixmap map("://res/01.jpg");//加入表盘
 QRect q(0,0,400,400);
 painter.drawPixmap(q,map,q);
 QPen pen;
 painter.drawEllipse(QPointF(200.0,200.0),radious,radious);//画圆
 painter.drawLine(xCenter,yCenter,xSecond,ySecond);//秒针
 pen.setWidth(2);
 painter.setPen(pen);
 painter.drawLine(xCenter,yCenter,xMinute,yMinute);//分针
 pen.setWidth(4);
 painter.setPen(pen);
 painter.drawLine(xCenter,yCenter,xHour,yHour);//时针
}
MainWindow::~MainWindow()
{
 delete ui;
}

6)main文件:

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
 QApplication a(argc, argv);
 MainWindow w;
 w.show();
 return a.exec();
}

至此,时钟就完成了,效果图:

总结:

1)制作时钟就是简单地二维画图和定时器的结合,难度不高,易上手,可以多尝试。
2)在计算针尖的坐标时,注意Qt的坐标X轴横向向右为正,Y轴垂直向下为正,顺时针度数增加,不然很容易算错。
3)添加表盘(添加图片)在我上一个博客有详细讲解,不会的同学可以去翻翻。

文中一些理论知识选自 清华大学出版社 仇国巍 《Qt图形界面编程入门》

最后,作为一名萌新,如果有大佬发现文章中有不正确的地方可以及时提出,也可以提出你们宝贵的建议,大家共同成长。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • QTimer与QTime实现电子时钟

    本文实例为大家分享了QTimer与QTime实现电子时钟的具体代码,供大家参考,具体内容如下 使用QLCDNumber控件进行显示 QLCDNumber控件默认只显示5个字符,可以使用setDigitCount(int size)进行设置显示个数 使用Display(QString str) 设置显示内容 该函数拥有多个重载,字符 整型 浮点型都可以作为参数 效果图: 代码:头文件 #include <QLCDNumber> class NumClock : public QLCDNumber

  • QT实现简单时钟效果

    本文实例为大家分享了QT实现简单时钟效果的具体代码,供大家参考,具体内容如下 先上效果图: 预备知识: 一.钟表实现原理 设置定时器timer,每隔1000毫秒(即1s)发送timeout()信号到槽函数update(),重绘事件函数paintEvent(QPaintEventevent) 二.钟表的绘制方法 拆分钟表:表盘 数字 刻度线 指针 paintEvent(QPaintEventevent) 1.设置定时器,时间间隔为1000毫秒,并且将定时器时间与update函数关联为信号和槽,定时

  • Qt设计时钟效果

    作为一位Qt的初学者,也是一位编程的小白,我今天想教大家如何使用Qt来设计一个时钟. 首先,我们要学习如何绘图--QPainter类 QPainter通常在一个窗口的重绘事件(paint event)的处理函数paintEvent中进行绘制.QPainter类常用的功能有以下几类: 1)设置绘图工具.包括设置画笔(setPen),设置画刷(setBrush),设置字体(setFont)以及设置背景(setBackgroundMode). 2)绘制图形和文字,如图: QPainter部分画图函数的

  • Qt绘制时钟效果

    简述 QPainter 提供了 2D 绘图的常用操作,QTimer 提供了定时器功能,将两者相结合,可以做出很多的自定义特效绘制. 下面,来实现一个每天都要接触的东西 - 时钟.包含了常见的所有功能:时针.分针.秒针. 实现方式 由于时钟是妙级更新的,所以我们需要定时刷新,时钟本身则使用之前讲过的 QPainter 来进行绘制. 使用 QTimer 定时刷新,设置超时时间为 1000 毫秒(1 秒). 绘制时钟,通过 paintEvent() 实现,包括:时针.分针.秒针.及面板.表盘等. 绘制

  • JavaFX实现简易时钟效果

    本文实例为大家分享了JavaFX实现简易时钟效果的具体代码,供大家参考,具体内容如下 首先要在面板中显示一个时钟,我们可以设计一个ClockPane类来显示一个时钟. 最终效果: 若要绘制一个时钟,需要绘制一个圆并为秒钟.分钟和小时绘制三个指针.为了画一个指针,需要确定一条直线的两端:一端是时钟的中央,位于(centerX,centerY):另外一端位于(endX,endY),由一下公式来确定: endX=centerX+handLength×sin(θ) endY=centerY-handLe

  • C++ Qt绘制时钟界面

    首先来看一下效果: 大概就是这样子,需要注意的是,这里你需要创建一个基类为Widget的界面来绘制时钟,以至于后期你想把这个时钟放到任意一个界面,你只需要在那个界面的ui里面添加一个widget,然后将它提升为这个时钟界面,并设定它的大小. widget.h文件 #ifndef WIDGET_H #define WIDGET_H #include<math.h> #include<QResizeEvent> #include<QGroupBox> #include<

  • 基于QT设计一个春联自动生成器

    目录 1. 前言 2. 实现原理 3. 示例代码 3.1 获取春联接口 3.2 数据解析代码 3.3 token数据存储 1. 前言 春节是中国最隆重的传统节日,一到过年家家户户肯定是要贴春联:在春节前夕,会用大红纸张,加上浓墨书写祝福词语,在春节当天贴于门框两边,寓意着一年吉祥如意,还会将福字倒转贴于门上,有"福到临门"的意思.为了方便找到合适的春联句子,我这里就采用现成的自然语言处理接口实现了一个自动生成春联的软件,输入提示词就可以完成春联的生成,方便写春联时参考. 下面是实现的效

  • QT设计秒表功能(跑步计时器)

    本文实例为大家分享了QT设计秒表功能的具体代码,供大家参考,具体内容如下 设计目标 1. 定时器开始 2.复位从0开始计时 3.记录--把记录的时间添加到QTextBrowser, append(时间) 4. QTime t(0,0,0)   t = t.addMsec( number )  t.toString (“hh:mm:ss:zzz”) 定时器(QTimer)的使用 定时器---定时发送信号timeoutQTimer 定时器类 1.创建定时器类对象QTimer mtimer; 2.把定

  • JS实现的网页倒计时数字时钟效果

    本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

  • 使用JS显示倒计时数字时钟效果

    本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • 基于javascript实现动态时钟效果

    本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

随机推荐