I.はじめに
前回の記事ではWIN10用のハローカレンダーを模倣したものを書きましたが、今回は一部のWebページで見られる効果であるハロークロックを描画してみます。この進行状況バーにはハロー効果があり、中央の日付と時刻のテキストにもハロー効果があります。全体的な外観は少し SF 的です。このコントロールには技術的な問題はありません。難しいのは、このハロー効果をどのように生成するかです。ペインターを使用して描画するときに、ブラシを設定できます。ブラシにはさまざまなグラデーション効果を適用できます。これは非常に強力です。主に線形グラデーション、円形グラデーション、先細グラデーションがあります。 . この 3 つのグラデーションはうまく活用されており、さまざまな方法で効果を発揮できます。
ハロー効果を生成するには、円形のグラデーションを使用し、円形のグラデーション内のさまざまな位置に透明度の値を設定する必要があります。対応する時間、分、秒の進行状況は自動的に計算できます。これは難しいことではありません。たとえば、 、QTime を直接使用して、対応する時、分、秒を取得し、時計と分を 60 で割って、秒を 1000 で割って、対応する進行状況を取得できます。ハローテキストの描画はQPainterPathのaddTextを使って実装されています。
2. 実装された機能
- 1: 円弧半径幅を設定可能
- 2: ハロー幅を設定可能
- 3:ハローカラーを設定可能
- 4：文字色を設定可能
- 5: アニメーション機構を使用して進行状況の表示時間を滑らかにする
3.エフェクト描画
4. ヘッダファイルのコード
#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
この記事の特典として、Qt 開発学習パッケージと技術ビデオ (C++ 言語の基礎、Qt プログラミングの概要、QT シグナルとスロットのメカニズム、QT インターフェイス開発イメージの描画、QT ネットワーク、QT データベース) を無料で受け取ることができます。プログラミング、QT プロジェクトの実践、QT 組み込み開発、Quick モジュールなど） ↓↓↓↓下記参照↓↓料金受け取りは記事下部をクリック↓↓
5. コアコード
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. コントロールの導入
- さまざまなダッシュボード、プログレスバー、プログレスボール、コンパス、カーブ、ルーラー、温度計、ナビゲーションバー、ナビゲーションバー、フラットイ、ハイライトボタン、スライドセレクター、旧暦などをカバーする160以上の絶妙なコントロール。qwt によって統合されるコントロールの数をはるかに上回ります。
- 各クラスは結合なしで個別のコントロールに独立して形成できます。各コントロールにはヘッダー ファイルと実装ファイルがあり、他のファイルに依存しません。単一のコントロールを次の形式でプロジェクトに統合するのが便利です。ソースコードの量が減り、コードが減ります。qwt のコントロール クラスは連動しており、高度に結合されているため、いずれかのコントロールを使用する場合は、すべてのコードを含める必要があります。
- すべて純粋な Qt で書かれ、QWidget+QPainter によって描画され、Qt4.6 から Qt5.13 までの任意の Qt バージョンをサポートし、mingw、msvc、gcc などのコンパイラをサポートし、Windows+Linux+Mac などのオペレーティング システムをサポートします。 +埋め込み Linux など、コード化けせずに Qt Creator に直接統合でき、組み込みコントロールのように使用でき、ほとんどのエフェクトはいくつかのプロパティを設定するだけで済み、非常に便利です。
- 各コントロールには、簡単に参照して使用できるように、コントロールのソース コードを含む対応する個別のデモがあります。また、すべてのコントロールで使用される統合デモも提供します。
- 各コントロールのソース コードには詳細な中国語のコメントがあり、統一された設計仕様に従って記述されているため、カスタム コントロールの作成方法を簡単に学ぶことができます。
- 各コントロールのデフォルトのカラーマッチングとデモに対応したカラーマッチングが非常に絶妙です。
- 130 を超える表示コントロールと 6 つの非表示コントロール。
- 一部のコントロールでは、複数のスタイルの選択肢と複数のインジケーター スタイルの選択肢が提供されます。
- すべてのコントロールはフォームストレッチの変化に適応します。
- 統合されたカスタム コントロール属性デザイナー、ドラッグ アンド ドロップ デザイン、WYSIWYG をサポートし、XML 形式のインポートとエクスポートをサポートします。
- ActiveX コントロールのデモが付属しており、すべてのコントロールを IE ブラウザで直接実行できます。
- fontawesome グラフィック フォントと Alibaba iconfont が収集した何百ものグラフィック フォントを統合し、グラフィック フォントがもたらす楽しさをお楽しみください。
- すべてのコントロールは最終的にダイナミック ライブラリ ファイル (dll など) を生成します。これは、ドラッグ アンド ドロップ設計のために qtcreator に直接統合できます。
- qml バージョンはすでにありますが、ユーザーからの要望が多ければ pyqt バージョンも検討される予定です。
- カスタム コントロール プラグインは、バックドアや制限なしでダイナミック ライブラリを自由に使用できます (永久無料)。お気軽にご利用ください。
- 現在、32 バージョンの dll が提供されており、その中で qt_5_7_0_mingw530_32 バージョンは常に最新かつ完全であることが保証されます。
- コントロールは随時追加および改善され、SDK も随時更新されます。ご提案は大歓迎です。ありがとうございます。
- Qt の入門書としては、Huo Yafei 著の『Qt Creator によるクイック スタート』および『Qt5 プログラミング入門』を、Qt の上級書籍については、公式の『C++ GUI Qt4 Programming』をお勧めします。
- プログラマー向けの自己啓発本と計画本シリーズ『偉そうなプログラマー』、『プログラマーの成長講座』、『悩み解消プログラマー』シリーズはとてもためになり、一生役に立つのでとてもおすすめです。
- SDK アドレス: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk
元のリンク: https://www.cnblogs.com/feiyangqingyun/p/11651993.html
この記事の特典として、Qt 開発学習パッケージと技術ビデオ (C++ 言語の基礎、Qt プログラミングの概要、QT シグナルとスロットのメカニズム、QT インターフェイス開発イメージの描画、QT ネットワーク、QT データベース) を無料で受け取ることができます。プログラミング、QT プロジェクトの実践、QT 組み込み開発、Quick モジュールなど） ↓↓↓↓下記参照↓↓料金受け取りは記事下部をクリック↓↓