Qt編寫自定義控制項19-圖片背景時鐘

關注本公眾號並回復Qt自定義控制項獲取代碼工程

一、前言

圖片背景時鐘控制項，是全套控制項（目前共145個）中唯一的幾個貼圖的控制項，這個背景要是不貼圖，會畫到猝死，必須用美工做好的圖貼圖作為背景，此控制項以前學C#的時候寫過，後面在寫Qt控制項的過程中把他移植過來了，其實畫法完全一模一樣，我能說連代碼我都是直接複製粘貼過來改改的嗎？所以有過多年編程經驗的程式設計師們都知道，編程都是一通百通的，只要掌握好了一門，或者精通了一門，其他都是水到渠成的事情，基本上學習個把星期都能直接擼的那種，配合F1幫助文檔和官方手冊，直接手擼起來（各位別多想，是指擼代碼）。

貼圖的控制項都很簡單，直接drawimage完事，本控制項除了支持多種背景風格樣式以外，還特意增加了指針走動風格樣式，直接滑鼠右鍵切換風格等。

二、實現的功能

1:支持滑鼠右鍵切換風格

2:支持設置四種背景風格樣式

3:支持四種秒針走動風格樣式

4:增加設置時間接口

三、效果圖

四、頭文件代碼

#ifndef IMAGECLOCK_H#define IMAGECLOCK_H/** * 圖片時鐘控制項 作者:feiyangqingyun(QQ:517216493) 2016-11-4 * 1:支持滑鼠右鍵切換風格 * 2:支持設置四種背景風格樣式 * 3:支持四種秒針走動風格樣式 * 4:增加設置時間接口 */#include <QWidget>#ifdef quc#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))#include <QtDesigner/QDesignerExportWidget>#else#include <QtUiPlugin/QDesignerExportWidget>#endifclass QDESIGNER_WIDGET_EXPORT ImageClock : public QWidget#elseclass ImageClock : public QWidget#endif{    Q_OBJECT    Q_ENUMS(ClockStyle)    Q_ENUMS(SecondStyle)    Q_PROPERTY(ClockStyle clockStyle READ getClockStyle WRITE setClockStyle)    Q_PROPERTY(SecondStyle secondStyle READ getSecondStyle WRITE setSecondStyle)public:    enum ClockStyle {        ClockStyle_Trad = 0,        //黑色風格        ClockStyle_System = 1,      //銀色風格        ClockStyle_Modern = 2,      //紅色風格        ClockStyle_Flower = 3       //花瓣風格    };    enum SecondStyle {        SecondStyle_Normal = 0,     //普通效果        SecondStyle_Spring = 1,     //彈簧效果        SecondStyle_Continue = 2,   //連續效果        SecondStyle_Hide = 3        //隱藏效果    };    explicit ImageClock(QWidget *parent = 0);    ~ImageClock();protected:    void paintEvent(QPaintEvent *);    void drawBg(QPainter *painter);    void drawHour(QPainter *painter);    void drawMin(QPainter *painter);    void drawSec(QPainter *painter);    void drawDot(QPainter *painter);private:    ClockStyle clockStyle;      //背景樣式    SecondStyle secondStyle;    //秒針走動樣式    QImage clockBg;             //主背景    QImage clockHour;           //時鐘背景    QImage clockMin;            //分鐘背景    QImage clockSec;            //秒鐘背景    QImage clockDot;            //中間點背景    QImage clockHighlights;     //高亮背景    QStringList imageNames;     //圖片名稱集合    QTimer *timer;              //定時器計算時間    int hour, min, sec, msec;   //時分秒毫秒    QTimer *timerSpring;        //定時器顯示彈簧效果    double angleSpring;         //彈簧角度    QAction *action_secondstyle;//秒針樣式右鍵菜單private Q_SLOTS:    void doAction();    void updateTime();    void updateSpring();public:    ClockStyle getClockStyle()      const;    SecondStyle getSecondStyle()    const;    QSize sizeHint()                const;    QSize minimumSizeHint()         const;public Q_SLOTS:    //設置圖片背景時鐘樣式    void setClockStyle(const ClockStyle &clockStyle);    //設置秒針走動樣式    void setSecondStyle(const SecondStyle &secondStyle);    //設置系統時間    void setSystemDateTime(const QString &year, const QString &month, const QString &day,                           const QString &hour, const QString &min, const QString &sec);};#endif // IMAGECLOCK_H
五、完整代碼
#pragma execution_character_set("utf-8")
#include "imageclock.h"#include "qpainter.h"#include "qtimer.h"#include "qdatetime.h"#include "qmath.h"#include "qaction.h"#include "qprocess.h"#include "qdebug.h"
ImageClock::ImageClock(QWidget *parent): QWidget(parent){  setFont(QFont("Microsoft Yahei", 9));
  QAction *action_trad = new QAction("黑色風格", this);  connect(action_trad, SIGNAL(triggered(bool)), this, SLOT(doAction()));  this->addAction(action_trad);
  QAction *action_system = new QAction("銀色風格", this);  connect(action_system, SIGNAL(triggered(bool)), this, SLOT(doAction()));  this->addAction(action_system);
  QAction *action_modern = new QAction("紅色風格", this);  connect(action_modern, SIGNAL(triggered(bool)), this, SLOT(doAction()));  this->addAction(action_modern);
  QAction *action_flower = new QAction("花瓣風格", this);  connect(action_flower, SIGNAL(triggered(bool)), this, SLOT(doAction()));  this->addAction(action_flower);
  action_secondstyle = new QAction("彈簧效果", this);  connect(action_secondstyle, SIGNAL(triggered(bool)), this, SLOT(doAction()));  this->addAction(action_secondstyle);
  this->setContextMenuPolicy(Qt::ActionsContextMenu);
  imageNames << "trad" << "system" << "modern" << "flower";
  timer = new QTimer(this);  timer->setInterval(1000);  connect(timer, SIGNAL(timeout()), this, SLOT(updateTime()));  timer->start();
  timerSpring = new QTimer(this);  timerSpring->setInterval(30);  connect(timerSpring, SIGNAL(timeout()), this, SLOT(updateSpring()));  angleSpring = 6.0 * (sec + (double)msec / 1000);
    setClockStyle(ClockStyle_System);  setSecondStyle(SecondStyle_Normal);  updateTime();}
ImageClock::~ImageClock(){  if (timer->isActive()) {    timer->stop();  }
  if (timerSpring->isActive()) {    timerSpring->stop();  }}
void ImageClock::paintEvent(QPaintEvent *){  int width = this->width();  int height = this->height();
    QPainter painter(this);  painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);  painter.setRenderHint(QPainter::SmoothPixmapTransform, true);
    drawBg(&painter);
  painter.translate(width / 2, height / 2);
    drawHour(&painter);    drawMin(&painter);    drawSec(&painter);    drawDot(&painter);}
void ImageClock::drawBg(QPainter *painter){  painter->save();  int pixX = rect().center().x() - clockBg.width() / 2;  int pixY = rect().center().y() - clockBg.height() / 2;  QPoint point(pixX, pixY);  painter->drawImage(point, clockBg);  painter->drawImage(point, clockHighlights);  painter->restore();}
void ImageClock::drawHour(QPainter *painter){  painter->save();  painter->rotate(30.0 * ((hour + min / 60.0)));  painter->drawImage(QRect(-6.5, -64.5, 13, 129), clockHour);  painter->restore();}
void ImageClock::drawMin(QPainter *painter){  painter->save();  painter->rotate(6.0 * (min + sec / 60.0));  painter->drawImage(QRect(-6.5, -64.5, 13, 129), clockMin);  painter->restore();}
void ImageClock::drawSec(QPainter *painter){  if (secondStyle == SecondStyle_Hide) {    return;  }
  painter->save();  painter->rotate(angleSpring);  painter->drawImage(QRect(-6.5, -64.5, 13, 129), clockSec);  painter->restore();}
void ImageClock::drawDot(QPainter *painter){  painter->save();  painter->drawImage(QRect(-6.5, -64.5, 13, 129), clockDot);  painter->restore();}
void ImageClock::doAction(){  QAction *action = (QAction *)sender();  QString str = action->text();
  if (str == "黑色風格") {    setClockStyle(ClockStyle_Trad);  } else if (str == "銀色風格") {    setClockStyle(ClockStyle_System);  } else if (str == "紅色風格") {    setClockStyle(ClockStyle_Modern);  } else if (str == "花瓣風格") {    setClockStyle(ClockStyle_Flower);  } else if (str == "彈簧效果") {    action->setText("連續效果");    setSecondStyle(SecondStyle_Spring);  } else if (str == "連續效果") {    action->setText("隱藏效果");    setSecondStyle(SecondStyle_Continue);  } else if (str == "隱藏效果") {    action->setText("普通效果");    setSecondStyle(SecondStyle_Hide);  } else if (str == "普通效果") {    action->setText("彈簧效果");    setSecondStyle(SecondStyle_Normal);  }}
void ImageClock::updateTime(){  QTime now = QTime::currentTime();  hour = now.hour();  min = now.minute();  sec = now.second();  msec = now.msec();
  if (secondStyle != SecondStyle_Hide) {    angleSpring = 6.0 * (sec + (double)msec / 1000);
    if (secondStyle == SecondStyle_Spring) {      angleSpring += 5;      timerSpring->start();    }  }
  update();}
void ImageClock::updateSpring(){  angleSpring = 6.0 * (sec + (double)msec / 1000);  update();  timerSpring->stop();}
ImageClock::ClockStyle ImageClock::getClockStyle() const{  return this->clockStyle;}
ImageClock::SecondStyle ImageClock::getSecondStyle() const{  return this->secondStyle;}
QSize ImageClock::sizeHint() const{  return QSize(130, 130);}
QSize ImageClock::minimumSizeHint() const{  return QSize(130, 130);}
void ImageClock::setClockStyle(const ClockStyle &clockStyle){    if (this->clockStyle != clockStyle){        QString imageName = imageNames.at(clockStyle);        this->clockStyle = clockStyle;        clockBg = QImage(QString(":/image/clock_%1.png").arg(imageName));        clockHour = QImage(QString(":/image/clock_%1_h.png").arg(imageName));        clockMin = QImage(QString(":/image/clock_%1_m.png").arg(imageName));        clockSec = QImage(QString(":/image/clock_%1_s.png").arg(imageName));        clockDot = QImage(QString(":/image/clock_%1_dot.png").arg(imageName));        clockHighlights = QImage(QString(":/image/clock_%1_highlights.png").arg(imageName));        update();    }}
void ImageClock::setSecondStyle(const SecondStyle &secondStyle){    if (this->secondStyle != secondStyle){        this->secondStyle = secondStyle;
        if (secondStyle == SecondStyle_Continue) {            timer->setInterval(100);        } else {            timer->setInterval(1000);        }
        if (secondStyle == SecondStyle_Spring) {            action_secondstyle->setText("連續效果");        } else if (secondStyle == SecondStyle_Continue) {            action_secondstyle->setText("隱藏效果");        } else if (secondStyle == SecondStyle_Hide) {            action_secondstyle->setText("普通效果");        } else if (secondStyle == SecondStyle_Normal) {            action_secondstyle->setText("彈簧效果");            updateTime();            return;        }
        update();    }}
void ImageClock::setSystemDateTime(const QString &year, const QString &month, const QString &day,                                   const QString &hour, const QString &min, const QString &sec){#ifdef Q_OS_WIN  QProcess p(0);  p.start("cmd");  p.waitForStarted();  p.write(QString("date %1-%2-%3\n").arg(year).arg(month).arg(day).toLatin1());  p.closeWriteChannel();  p.waitForFinished(1000);  p.close();  p.start("cmd");  p.waitForStarted();  p.write(QString("time %1:%2:%3.00\n").arg(hour).arg(min).arg(sec).toLatin1());  p.closeWriteChannel();  p.waitForFinished(1000);  p.close();#else  QString cmd = QString("date %1%2%3%4%5.%6").arg(month).arg(day).arg(hour).arg(min).arg(year).arg(sec);  system(cmd.toLatin1());  system("hwclock -w");#endif}


六、控制項介紹
超過150個精美控制項，涵蓋了各種儀錶盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt集成的控制項數量。
每個類都可以獨立成一個單獨的控制項，零耦合，每個控制項一個頭文件和一個實現文件，不依賴其他文件，方便單個控制項以源碼形式集成到項目中，較少代碼量。qwt的控制項類環環相扣，高度耦合，想要使用其中一個控制項，必須包含所有的代碼。
全部純Qt編寫，QWidget+QPainter繪製，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等編譯器，支持任意作業系統比如windows+linux+mac+嵌入式linux等，不亂碼，可直接集成到Qt Creator中，和自帶的控制項一樣使用，大部分效果只要設置幾個屬性即可，極為方便。
每個控制項都有一個對應的單獨的包含該控制項源碼的DEMO，方便參考使用。同時還提供一個所有控制項使用的集成的DEMO。
每個控制項的原始碼都有詳細中文注釋，都按照統一設計規範編寫，方便學習自定義控制項的編寫。
每個控制項默認配色和demo對應的配色都非常精美。
超過130個可見控制項，6個不可見控制項。
部分控制項提供多種樣式風格選擇，多種指示器樣式選擇。
所有控制項自適應窗體拉伸變化。
集成自定義控制項屬性設計器，支持拖曳設計，所見即所得，支持導入導出xml格式。
自帶activex控制項demo，所有控制項可以直接運行在ie瀏覽器中。
集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個圖形字體，享受圖形字體帶來的樂趣。
所有控制項最後生成一個dll動態庫文件，可以直接集成到qtcreator中拖曳設計使用。
目前已經有qml版本，後期會考慮出pyqt版本，如果用戶需求量很大的話。
————————————————
版權聲明：本文為CSDN博主「feiyangqingyun」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本聲明。
原文連結：https://blog.csdn.net/feiyangqingyun/article/details/90083455