Qt绘制时钟效果

 更新时间:2020年05月30日 09:07:11   作者:weixin_33695450  
这篇文章主要为大家详细介绍了Qt绘制时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

简述

QPainter 提供了 2D 绘图的常用操作,QTimer 提供了定时器功能,将两者相结合,可以做出很多的自定义特效绘制。

下面,来实现一个每天都要接触的东西 - 时钟。包含了常见的所有功能:时针、分针、秒针。

实现方式

由于时钟是妙级更新的,所以我们需要定时刷新,时钟本身则使用之前讲过的 QPainter 来进行绘制。

使用 QTimer 定时刷新,设置超时时间为 1000 毫秒(1 秒)。
绘制时钟,通过 paintEvent() 实现,包括:时针、分针、秒针、及面板、表盘等。
绘制小时对应的文本,文本区域通过 textRectF() 计算。

示例

效果

源码

首先,我们构造一个定时器 QTimer,连接其超时信号 timeout() 到槽函数 update(),当调用 update() 时,系统会自动通知当前界面进行重绘(paintEvent())。

ClockWidget::ClockWidget(QWidget *parent)
  : QWidget(parent)
{
  ...
 
  // 构造定时器,设置超时为 1 秒
  QTimer *timer = new QTimer(this);
  connect(timer, SIGNAL(timeout()), this, SLOT(update()));
  timer->start(1000);
  ...
}

实现一个用于获取文本区域的接口:

QRectF ClockWidget::textRectF(double radius, int pointSize, double angle)
{
  QRectF rectF;
  rectF.setX(radius*qCos(angle*M_PI/180.0) - pointSize*2);
  rectF.setY(radius*qSin(angle*M_PI/180.0) - pointSize/2.0);
  rectF.setWidth(pointSize*4);
  rectF.setHeight(pointSize);
  return rectF;
}

注意:这里,textRectF() 主要用于获取小时对应的文本区域。

重写 paintEvent(),用于绘制时钟。

void ClockWidget::paintEvent(QPaintEvent *event)
{
  Q_UNUSED(event);
 
  // 时针、分针、秒针位置 - 多边形
  static const QPoint hourHand[3] = {
    QPoint(7, 8),
    QPoint(-7, 8),
    QPoint(0, -30)
  };
  static const QPoint minuteHand[3] = {
    QPoint(7, 8),
    QPoint(-7, 8),
    QPoint(0, -65)
  };
 
  static const QPoint secondHand[3] = {
    QPoint(7, 8),
    QPoint(-7, 8),
    QPoint(0, -80)
  };
 
  // 时针、分针、秒针颜色
  QColor hourColor(200, 100, 0, 200);
  QColor minuteColor(0, 127, 127, 150);
  QColor secondColor(0, 160, 230, 150);
 
  int side = qMin(width(), height());
  QTime time = QTime::currentTime();
 
  QPainter painter(this);
  painter.setRenderHint(QPainter::Antialiasing);
  // 平移坐标系原点至中心点
  painter.translate(width() / 2, height() / 2);
  // 缩放
  painter.scale(side / 200.0, side / 200.0);
 
  // 绘制时针
  painter.setPen(Qt::NoPen);
  painter.setBrush(hourColor);
 
  painter.save();
  // 每圈360° = 12h 即:旋转角度 = 小时数 * 30°
  painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0)));
  painter.drawConvexPolygon(hourHand, 3);
  painter.restore();
 
  painter.setPen(hourColor);
 
  // 绘制小时线 (360度 / 12 = 30度)
  for (int i = 0; i < 12; ++i) {
    painter.drawLine(88, 0, 96, 0);
    painter.rotate(30.0);
  }
 
  int radius = 100;
  QFont font = painter.font();
  font.setBold(true);
  painter.setFont(font);
  int pointSize = font.pointSize();
 
  // 绘制小时文本
  int nHour = 0;
  for (int i = 0; i < 12; ++i) {
    nHour = i + 3;
    if (nHour > 12)
      nHour -= 12;
    painter.drawText(textRectF(radius*0.8, pointSize, i * 30), Qt::AlignCenter, QString::number(nHour));
  }
 
  // 绘制分针
  painter.setPen(Qt::NoPen);
  painter.setBrush(minuteColor);
 
  painter.save();
  // 每圈360° = 60m 即:旋转角度 = 分钟数 * 6°
  painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
  painter.drawConvexPolygon(minuteHand, 3);
  painter.restore();
 
  painter.setPen(minuteColor);
 
  // 绘制分钟线 (360度 / 60 = 6度)
  for (int j = 0; j < 60; ++j) {
    if ((j % 5) != 0)
      painter.drawLine(92, 0, 96, 0);
    painter.rotate(6.0);
  }
 
  // 绘制秒针
  painter.setPen(Qt::NoPen);
  painter.setBrush(secondColor);
 
  painter.save();
  // 每圈360° = 60s 即:旋转角度 = 秒数 * 6°
  painter.rotate(6.0 * time.second());
  painter.drawConvexPolygon(secondHand, 3);
  painter.restore();
}

好了,注释写的很清楚了,就不多做讲解了,如果要做一个应用,可以自己实现一些设置指针、表盘样式外观的一些接口。

注意:网上很多文本都是在旋转之后绘制上去的,效果并不好(6 显示的是 9),所以请避免这一点!

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

相关文章

  • 详解如何将Spire.XLS for C++集成到C++程序中

    详解如何将Spire.XLS for C++集成到C++程序中

    Spire.XLS for C++ 是一个 Excel 库,供开发人员在任何类型的 C++ 应用程序中操作 Excel 文档(XLS、XLSX、XLSB 和 XLSM)。 本文演示了如何以两种不同的方式将 Spire.XLS for C++ 集成到您的 C++ 应用程序中
    2023-03-03
  • 基于C语言编写一个简单的抽卡小游戏

    基于C语言编写一个简单的抽卡小游戏

    这篇文章主要为大家介绍了如何利用C语言实现原神抽卡的小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-04-04
  • C语言杨氏矩阵查找算法实例讲解

    C语言杨氏矩阵查找算法实例讲解

    杨氏矩阵是一个数字矩阵,矩阵的每一行从左到右一次递增,矩阵从上到下递增,在这样的矩阵中查找一个数字是否存在。时间复杂度小于O(N),有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-09-09
  • c语言实现通讯录管理系统详细实例

    c语言实现通讯录管理系统详细实例

    这篇文章主要给大家介绍了关于c语言实现通讯录管理系统的相关资料,通讯录管理系统是一种常见的应用程序,可以用来管理联系人的信息,包括姓名、电话号码、地址等,需要的朋友可以参考下
    2023-07-07
  • C++验证LeetCode包围区域的DFS方法

    C++验证LeetCode包围区域的DFS方法

    这篇文章主要介绍了C++验证LeetCode包围区域的DFS方法,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • C++实现简单版图书管理系统

    C++实现简单版图书管理系统

    这篇文章主要为大家详细介绍了C++实现简单版图书管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • C语言结构体计算内存占用问题解析

    C语言结构体计算内存占用问题解析

    这篇文章主要介绍了C语言结构体计算内存占用问题解析,本文通过案例来解析了C语言计算结构体内存的方式和方法,需要的朋友可以参考下
    2021-07-07
  • C++ deque容器的用法详解

    C++ deque容器的用法详解

    在处理一些数组的事情,所以随手保留一下Deque容器的使用方法很有必要,接下来通过本文给大家重点介绍C++ deque容器的用法及deque和vector的区别讲解,感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • C语言回调函数的简单运用

    C语言回调函数的简单运用

    回调函数就是函数指针变量作为另外一个函数的参数而使用的一种应用情形。本文就详细的介绍一下C语言回调函数的简单运用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • C++实现推箱子小游戏

    C++实现推箱子小游戏

    这篇文章主要为大家详细介绍了C++实现推箱子小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论