光晕的时钟代码自己制作电脑时钟

一.导言在上一篇文章中，我写了一个与WIN10系统高度相似的光环日历。这次画了一个光环钟，也是在一些网页上看到的效果。每一分钟都是以进度条的形式画出来的，而且这个进度条有光

本文最后更新时间： 2023-04-20 00:29:47

一.导言

在上一篇文章中，我写了一个与WIN10系统高度相似的光环日历。这次画了一个光环钟，也是在一些网页上看到的效果。每一分钟都是以进度条的形式画出来的，而且这个进度条有光晕效果，中间的日期时间字符也是光晕效果。整个事情看起来有点科幻。这种控制没有技术难度。如果真的很难，那就是如何产生这种光环效应。使用painter绘制时，设置画笔，可以设置画笔。笔刷可以是各种渐变效果，这个很厉害。主要有线性渐变、圆形渐变和锥形渐变。这三种渐变用得好，各种效果都得心应手。

为了产生光晕效果，你需要使用圆形渐变，并为圆形渐变中的不同位置设置透明度值。分钟对应的进度可以自动算出来，并不难。比如可以直接用QTime得到相应的分钟，然后将时钟和分钟除以60，秒除以1000得到相应的进度。发光文本是使用QPainterPath的addText绘制的。

二、实现的功能

* 1:可以设置圆弧半径的宽度。

* 2:可以设置光晕宽度。

* 3:可以设置发光颜色。

* 4:可以设置文本颜色。

* 5:采用动画机制，平滑进度显示时间。

三、效果图动词（verb的缩写）核心代码

void ShadowClock::drawArc(QPainter *painter, int radius, qreal angle){ painter->save(); painter->setPen(Qt::NoPen); int smallradius = radius - radiusWidth; int maxRaidus = radius + shadowWidth; int minRadius = smallradius - shadowWidth; //采用圆形渐变,形成光晕效果 QRadialGradient radialGradient(QPointF(0, 0), maxRaidus); QColor color = shadowColor; QColor lightColor = shadowColor.lighter(100); color.setAlphaF(0); radialGradient.setColorAt(0, color); radialGradient.setColorAt(minRadius * 1.0 / maxRaidus, color); color.setAlphaF(0.5); radialGradient.setColorAt(smallradius * 1.0 / maxRaidus, color); radialGradient.setColorAt((smallradius + 1) * 1.0 / maxRaidus, lightColor); radialGradient.setColorAt((radius - 1) * 1.0 / maxRaidus, lightColor); radialGradient.setColorAt(radius * 1.0 / maxRaidus, color); color.setAlphaF(0); radialGradient.setColorAt(1, color); painter->setBrush(radialGradient); painter->drawPie(-maxRaidus, -maxRaidus, maxRaidus * 2, maxRaidus * 2, 90 * 16, -angle * 16); painter->restore();}void ShadowClock::drawText(QPainter *painter){ painter->save(); painter->setPen(Qt::NoPen); QFont font; font.setBold(true); font.setPointSize(10); painter->setFont(font); QDateTime now = QDateTime::currentDateTime(); QFontMetricsF fm(font); QStringList textList; textList << now.toString("MM月dd日yyyy") << now.toString("hh:mm:ss.zzz"); //绘制文本路径 QPainterPath textPath; textPath.addText(-fm.width(textList.at(0)) / 2.0, -fm.lineSpacing() / 2.0, font, textList.at(0)); textPath.addText(-fm.width(textList.at(1)) / 2.0, fm.lineSpacing() / 2.0, font, textList.at(1)); QColor strokeColor = textColor.light(80); strokeColor.setAlphaF(0.2); painter->strokePath(textPath, QPen(strokeColor, shadowWidth, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin)); painter->setBrush(textColor); painter->drawPath(textPath); painter->restore();}

不及物动词控制介绍

1.160多个精致控件，涵盖各种仪表盘、进度条、进度球、指南针、图形、尺子、温度计、导航条、导航条、flatui、高亮按钮、滑动选择器、农历等。控件数量远超qwt集成。

2.每个类可以独立成一个单独的控件，零耦合。每个控件都有一个头文件和一个实现文件，不依赖于其他文件，便于单个控件以源代码的形式集成到项目中，代码较少。QW的控制类是环环相扣、高度耦合的。如果要使用其中一个控件，必须包含所有代码。

3.全部采用纯Qt编写，QWidget+QPainter绘制，支持Qt4.6到Qt5.13的任意Qt版本，mingw、msvc、gcc等编译器，以及windows+Linux+MAC+embedded Linux等任意操作系统。没有乱码，可以直接集成到Qt Creator中，像自己的控件一样使用。对于大多数效果，只需设置几个属性，极其方便。

4.每个控件都有对应的DEMO，包含控件的源代码，方便参考。它还提供了一个供所有控件使用的集成演示。

5.每个控件的源代码都有详细的中文注释，都是按照统一的设计规范编写的，方便学习如何编写自定义控件。

6.每个控件的默认配色和demo对应的配色都非常漂亮。

7.130多个可见控件和6个不可见控件。

8.有些控件提供了多种样式、样式和指示器样式。

9.所有控件都适应窗体的拉伸变化。

10.集成自定义控件属性设计器，支持拖动设计，所见即所得，支持导入导出xml格式。

11.自带activex控件演示，所有控件都可以直接在ie浏览器中运行。

12.整合fontawesome图文字体+阿里巴巴iconfont收集的数百种图文字体，享受图文字体的乐趣。

13.最后，所有的控件都会生成一个动态库文件(dll之类的。)，可以直接集成到qtcreator中进行拖动和设计。

14.目前有qml版本，后期会考虑pyqt版本，如果用户需求大的话。

15.自定义控件插件对动态库开放使用(永远免费)，没有任何后门和限制。请随意使用。