QT实现简单时钟效果

本文实例为大家分享了QT实现简单时钟效果的具体代码,供大家参考,具体内容如下

先上效果图:

预备知识:

一.钟表实现原理

设置定时器timer,每隔1000毫秒(即1s)发送timeout()信号到槽函数update(),重绘事件函数paintEvent(QPaintEventevent)

二.钟表的绘制方法

拆分钟表:表盘 数字 刻度线 指针

paintEvent(QPaintEventevent)

1.设置定时器,时间间隔为1000毫秒,并且将定时器时间与update函数关联为信号和槽,定时器每隔1秒发送一个信号
2.绘制时针分针秒针的形状。

// 时针、分针、秒针 - 多边形
 static const QPoint hourHand[3] = {
 QPoint(3, 8),
 QPoint(-3, 8),
 QPoint(0, -40)
 };

 static const QPoint minuteHand[3] = {
 QPoint(3, 8),
 QPoint(-3, 8),
 QPoint(0, -65)
 };

 static const QPoint secondHand[3] = {
 QPoint(3, 8),
 QPoint(-3, 8),
 QPoint(0, -80)
 };

3.绘制时针和时刻度线

 // 绘制时针
 painter.setPen(Qt::NoPen);
 painter.setBrush(hourColor);
 painter.save();
 painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0)));
 painter.drawConvexPolygon(hourHand, 3);
 painter.restore();
 painter.setPen(hourColor);
  // 绘制时刻度线
 for (int i = 0; i < 12; ++i)
 {
  painter.drawLine(88, 0, 96, 0);
  painter.rotate(30.0);
 }
 QFont font = painter.font();
 font.setBold(true);
 painter.setFont(font);

下面是一些基础的绘图函数:

drawPoint() 绘制点
drawLine() 绘制线
drawRect() 绘制矩形
drawEllipse() 绘制椭圆(绘制圆也是此函数)
drawConvexPolygon() 绘制凸多边形
drawText() 编制文本

特别的,我们还会经常用到
QPen:绘制几何图形的边缘,可绘制颜色,宽度,线的风格等
QBrush:用于几何图形的调色板与填充
则可借用setPen()来当做画笔来使用。
setBrush()来当做填充器使用来填充颜色。
setPen(color);
然后我们的绘制将会用此颜色的画笔来绘制图形边缘。
setBrush(color);

主要代码展示:

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();
}
``

```cpp
#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();
 }

}

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

(0)

相关推荐

  • Qt绘制时钟效果

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

  • Qt设计时钟效果

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

  • QTimer与QTime实现电子时钟

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

  • Qt编程实现小时钟

    Hello World! 学习编程语言的最简单最经典的小程序,当然Qt也不例外.在学习画图时,我觉得写个时钟小程序也是个比较好的开始.在之前的<Matlab及Java小时>一文中,我也从写时钟程序作为学习画图的开始.三者之间的不同点在于,matlab是通过while循环来进行重绘,Java和Qt事件来处理.实时显示时钟,都是通过改变指针与坐标轴的相对位置来实现的.前两者都是改变指针,而Qt是旋转坐标轴.具体代码如下: 1.widget.h文件 #ifndef WIDGET_H #define

  • QT实现简单时钟效果

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

  • Qt绘制简单时钟

    本文实例为大家分享了Qt绘制简单时钟的具体代码,供大家参考,具体内容如下 概述 (1)基本原理 利用简单的几何图形绘出表盘和指针,然后基于系统时间调整指针偏转角度达到模拟时钟的效果. 其中可以加上自己喜欢的背景资源,设计不同风格的时钟. (2)部分函数说明 ①调色和填充 painter.setBrush(Qt::red); //设置画刷,填充颜色(红色) painter.setPen(Qt::red); //设置画笔,外围轮廓颜色(红色) ②抗锯齿(减少图形外围锯齿状,使线条平滑) painte

  • Qt实现简单动态时钟

    本文实例为大家分享了Qt实现简单动态时钟的具体代码,供大家参考,具体内容如下 任务实现: 通过Qt语言使用计时器实现一个简单的动态时钟: 实现效果: 实现过程: 整体过程主要分为两个部分: 1.绘制一个表盘所需的元素:时分秒针,刻度,还可以插入钟面背景图片: 2.让所绘制的指针动起来(使用计时器并关联系统时间): 整体代码: dialog.h #ifndef DIALOG_H #define DIALOG_H #include <QDialog> QT_BEGIN_NAMESPACE name

  • Qt实现简易时钟

    本文实例为大家分享了Qt实现简易时钟展示的具体代码,供大家参考,具体内容如下 一.效果展示 简单实现时钟(圆盘+QLCDNumber),大小刻度,数字等. 二.实现 .pro QT += core gui greaterThan(QT_MAJOR_VERSION, 4): QT += widgets CONFIG += c++11 # The following define makes your compiler emit warnings if you use # any Qt featur

  • jQuery+css实现的时钟效果(兼容各浏览器)

    本文实例讲述了jQuery+css实现的时钟效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 这里没有做太多的修饰,简单的实现了一下功能,另外,用的是js的setTimeout方法,当时间长了之后,会有一定的延时,建议,在每隔多少分钟执行一次时钟校准!哈哈,都有误差的嘛,反正我是没给你校. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

  • canvas实现粒子时钟效果

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 通过遍历数字点阵的二维数组,当该位置的值为1时,则绘制一个粒子,否则不绘制 将绘制数字的函数命名为renderDigit().在该函数中,将粒子绘制为一个小圆.小圆的半径为R,小圆所占据的矩形宽(高)为2(R+1).由于数字点阵是10*7的二维数组,所以一个数字的宽度为14(R+1),高度为20(

  • Swift利用纯代码实现时钟效果实例代码

    前言 在刚开始学习iOS开发时,我制作了OneClock,它除了使用最多的翻页时钟效果,还拥有最常见的时钟样式. 今天用一个很简单的方式为大家展示如何实现时钟效果. 1.分别创建时针.分针.秒针 2.随着时间改变进行对应旋转 一.创建时针.分针.秒针 分别创建三个指针的同时,我们初始化了他们的位置,也就是在12点的方向. 这里我只贴出创建的代码,在使用的过程中可以根据需要进行放置.其中hourLength.minuteLength.secondLength分别代表三个指针的长度,在实际使用中根据

  • vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果 说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的 使用 npm npm install vue-canvas-co

  • JS+H5 Canvas实现时钟效果

    用JavaScript+Canvas来实现最简单的时钟效果,供大家参考,具体内容如下 效果图: 先看html代码: <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/demo3.js" ></script> </head>

  • QT实现动态时钟

    本文实例为大家分享了QT实现动态时钟的具体代码,供大家参考,具体内容如下 首次学习QT,这次用QT实现了动态图的制作,并成功制作了一个简易的时钟,效果如图: 加快100倍效果 所用背景图,如下(素材来源于百度图片): 代码,原理如下: mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; }

随机推荐