I. Introduction

In the previous article, I wrote a high imitation of the halo calendar for the WIN10 system. This time I will draw a halo clock, which is also the effect seen on some web pages. The hours, minutes and seconds are drawn in the form of a progress bar, and This progress bar has a halo effect, and the date and time text in the middle also has a halo effect. The overall look is a bit sci-fi. There are no technical difficulties in this control. If there is any difficulty, it is how to produce this halo effect. When using painter to draw, you can set the brush. The brush can have various gradient effects. This is very powerful. There are mainly linear gradients, circular gradients, and tapered gradients. These three gradients are well used and can be used in various ways. The effects are all at your fingertips.
In order to produce a halo effect, you need to use a circular gradient and set transparency values for different positions in the circular gradient. The corresponding progress in hours, minutes and seconds can be automatically calculated. This is not difficult. For example, you can directly use QTime to obtain the corresponding Hours, minutes and seconds, then divide the clock and minutes by 60, and divide the seconds by 1000 to get the corresponding progress. Drawing halo text is implemented using addText of QPainterPath.

2. Functions implemented

1: Arc radius width can be set
2: Halo width can be set
3: Halo color can be set
4: Text color can be set
5: Use animation mechanism to smooth progress display time

3. Effect drawing

4. Header file code

#ifndef SHADOWCLOCK_H
#define SHADOWCLOCK_H

/**
 * 光晕时钟控件 作者:雨田哥(QQ:3246214072) 整理:feiyangqingyun(QQ:517216493) 2019-10-07
 * 1:可设置圆弧半径宽度
 * 2:可设置光晕宽度
 * 3:可设置光晕颜色
 * 4:可设置文本颜色
 * 5:采用动画机制平滑进度展示时间
 */

#include <QWidget>

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT ShadowClock : public QWidget
#else
class ShadowClock : public QWidget
#endif

{
    Q_OBJECT
    Q_PROPERTY(int radiusWidth READ getRadiusWidth WRITE setRadiusWidth)
    Q_PROPERTY(int shadowWidth READ getShadowWidth WRITE setShadowWidth)

    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
    Q_PROPERTY(QColor shadowColor READ getShadowColor WRITE setShadowColor)

public:
    explicit ShadowClock(QWidget *parent = 0);
    ~ShadowClock();

protected:
    void paintEvent(QPaintEvent *);
    void drawArc(QPainter *painter, int radius, qreal angle);
    void drawText(QPainter *painter);

private:
    int radiusWidth;            //半径宽度
    int shadowWidth;            //光晕宽度

    QColor textColor;           //文本颜色
    QColor shadowColor;         //光晕颜色

public:
    int getRadiusWidth()        const;
    int getShadowWidth()        const;

    QColor getTextColor()       const;
    QColor getShadowColor()     const;

    QSize sizeHint()            const;
    QSize minimumSizeHint()     const;

public Q_SLOTS:
    //设置半径宽度+光晕宽度
    void setRadiusWidth(int radiusWidth);
    void setShadowWidth(int shadowWidth);

    //设置文本颜色+光晕颜色
    void setTextColor(const QColor &textColor);
    void setShadowColor(const QColor &shadowColor);
};

#endif // SHADOWCLOCK_H

As a benefit for this article, you can receive a Qt development learning package and technical videos for free, including (C++ language basics, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project practice , QT embedded development, Quick module, etc.) ↓↓↓↓↓↓See below↓↓Click at the bottom of the article to receive the fee↓↓

5. Core code

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

6. Control introduction

More than 160 exquisite controls, covering various dashboards, progress bars, progress balls, compasses, curves, rulers, thermometers, navigation bars, navigation bars, flatui, highlight buttons, sliding selectors, lunar calendar, etc. Far exceeds the number of controls integrated by qwt.
Each class can be independently formed into a separate control, with zero coupling. Each control has a header file and an implementation file, and does not rely on other files. It is convenient for a single control to be integrated into the project in the form of source code, with less code. The control classes of qwt are interlocking and highly coupled. If you want to use one of the controls, you must include all the code.
All written in pure Qt, drawn by QWidget+QPainter, supports any Qt version from Qt4.6 to Qt5.13, supports compilers such as mingw, msvc, gcc, etc., and supports any operating system such as windows+linux+mac+embedded linux, etc., without garbled code , can be directly integrated into Qt Creator and used like the built-in controls. Most effects only need to set a few properties, which is extremely convenient.
Each control has a corresponding separate DEMO containing the source code of the control for easy reference and use. It also provides an integrated DEMO used by all controls.
The source code of each control has detailed Chinese comments and is written in accordance with unified design specifications, making it easy to learn how to write custom controls.
The default color matching of each control and the color matching corresponding to the demo are very exquisite.
More than 130 visible controls and 6 invisible controls.
Some controls provide multiple style choices and multiple indicator style choices.
All controls adapt to form stretch changes.
Integrated custom control attribute designer, supports drag and drop design, WYSIWYG, supports import and export of xml format.
Comes with activex control demo, all controls can be run directly in the IE browser.
Integrate fontawesome graphic fonts + hundreds of graphic fonts collected by Alibaba iconfont, and enjoy the fun brought by graphic fonts.
All controls finally generate a dynamic library file (dll or so, etc.), which can be directly integrated into qtcreator for drag and drop design.
There is already a qml version, and a pyqt version will be considered later if there is great demand from users.
The custom control plug-in is open to dynamic library use (free forever), without any backdoors or restrictions, so please feel free to use it.
Currently, 32 versions of dll have been provided, among which the version qt_5_7_0_mingw530_32 will always be guaranteed to be the latest and complete.
Controls are added and improved from time to time, and the SDK is updated from time to time. Suggestions are welcome, thank you!
For introductory Qt books, we recommend Huo Yafei's "Quick Start with Qt Creator" and "Introduction to Qt5 Programming". For advanced Qt books, we recommend the official "C++ GUI Qt4 Programming".
I highly recommend the series of self-cultivation and planning books for programmers, "The Big Talk Programmer", "Programmer's Growth Course", and "The Worry-Relieving Programmer", which will benefit you a lot and will last a lifetime!
SDK address: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk

Original link: https://www.cnblogs.com/feiyangqingyun/p/11651993.html