一.导言
在上一篇文章中，我写了一个与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 ***allradius = radius - radiusWidth; int ***xRaidus = radius + shadowWidth; int minRadius = ***allradius - shadowWidth; //采用圆形渐变,形成光晕效果 QRadialGra***nt radialGra***nt(QPointF(0, 0), ***xRaidus); QColor color = shadowColor; QColor lightColor = shadowColor.lighter(100); color.setAlphaF(0); radialGra***nt.setColorAt(0, color); radialGra***nt.setColorAt(minRadius * 1.0 / ***xRaidus, color); color.setAlphaF(0.5); radialGra***nt.setColorAt(***allradius * 1.0 / ***xRaidus, color); radialGra***nt.setColorAt((***allradius + 1) * 1.0 / ***xRaidus, lightColor); radialGra***nt.setColorAt((radius - 1) * 1.0 / ***xRaidus, lightColor); radialGra***nt.setColorAt(radius * 1.0 / ***xRaidus, color); color.setAlphaF(0); radialGra***nt.setColorAt(1, color); painter->setBrush(radialGra***nt); painter->drawPie(-***xRaidus, -***xRaidus, ***xRaidus * 2, ***xRaidus * 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.自定义控件插件对动态库开放使用(永远免费)，没有任何后门和限制。请随意使用。
16.目前已经提供了32个版本的dll，其中qt_5_7_0_mingw530_32永远是最新最完整的版本。
17.不定期添加和改进控件，不定期更新SDK，欢迎大家的建议，谢谢！
18.Qt入门书籍推荐霍亚飞的《Qt Creator快速入门》和《Qt5编程入门》，Qt进阶书籍推荐官方的C++ GUI Qt4编程。
19.强烈推荐程序员修养与规划系列《大话程序员》《程序员成长课》《解忧程序员》，受益匪浅，终身受益！
20.SDK地址:[https://gitee.com/feiyangyingyun/qucsdk](https://gitee.com/feiyangyingyun/qucsdk)[https://github.com/feiyangyingyun/qucsdk](https://)
本文来自止步投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/638768.html
微信扫一扫 
