• 2914阅读
  • 1回复

Qt编写自定义控件19-图片背景时钟 [复制链接]

上一主题 下一主题
离线liudianwu
 

图酷模式  只看楼主 正序阅读 楼主  发表于: 2019-05-10
前言
图片背景时钟控件,是全套控件(目前共145个)中唯一的几个贴图的控件,这个背景要是不贴图,会画到猝死,必须用美工做好的图贴图作为背景,此控件以前学C#的时候写过,后面在写Qt控件的过程中把他移植过来了,其实画法完全一模一样,我能说连代码我都是直接复制粘贴过来改改的吗?所以有过多年编程经验的程序员们都知道,编程都是一通百通的,只要掌握好了一门,或者精通了一门,其他都是水到渠成的事情,基本上学习个把星期都能直接撸的那种,配合F1帮助文档和官方手册,直接手撸起来(各位别多想,是指撸代码)。
贴图的控件都很简单,直接drawimage完事,本控件除了支持多种背景风格样式以外,还特意增加了指针走动风格样式,直接鼠标右键切换风格等。
实现的功能
* 1:支持鼠标右键切换风格
* 2:支持设置四种背景风格样式
* 3:支持四种秒针走动风格样式
* 4:增加设置时间接口
效果图


文件代码
  1. #ifndef IMAGECLOCK_H
  2. #define IMAGECLOCK_H
  3. /**
  4. * 图片时钟控件 作者:feiyangqingyun(QQ:517216493) 2016-11-4
  5. * 1:支持鼠标右键切换风格
  6. * 2:支持设置四种背景风格样式
  7. * 3:支持四种秒针走动风格样式
  8. * 4:增加设置时间接口
  9. */
  10. #include <QWidget>
  11. #ifdef quc
  12. #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
  13. #include <QtDesigner/QDesignerExportWidget>
  14. #else
  15. #include <QtUiPlugin/QDesignerExportWidget>
  16. #endif
  17. class QDESIGNER_WIDGET_EXPORT ImageClock : public QWidget
  18. #else
  19. class ImageClock : public QWidget
  20. #endif
  21. {
  22.     Q_OBJECT
  23.     Q_ENUMS(ClockStyle)
  24.     Q_ENUMS(SecondStyle)
  25.     Q_PROPERTY(ClockStyle clockStyle READ getClockStyle WRITE setClockStyle)
  26.     Q_PROPERTY(SecondStyle secondStyle READ getSecondStyle WRITE setSecondStyle)
  27. public:
  28.     enum ClockStyle {
  29.         ClockStyle_Trad = 0,        //黑色风格
  30.         ClockStyle_System = 1,      //银色风格
  31.         ClockStyle_Modern = 2,      //红色风格
  32.         ClockStyle_Flower = 3       //花瓣风格
  33.     };
  34.     enum SecondStyle {
  35.         SecondStyle_Normal = 0,     //普通效果
  36.         SecondStyle_Spring = 1,     //弹簧效果
  37.         SecondStyle_Continue = 2,   //连续效果
  38.         SecondStyle_Hide = 3        //隐藏效果
  39.     };
  40.     explicit ImageClock(QWidget *parent = 0);
  41.     ~ImageClock();
  42. protected:
  43.     void paintEvent(QPaintEvent *);
  44.     void drawBg(QPainter *painter);
  45.     void drawHour(QPainter *painter);
  46.     void drawMin(QPainter *painter);
  47.     void drawSec(QPainter *painter);
  48.     void drawDot(QPainter *painter);
  49. private:
  50.     ClockStyle clockStyle;      //背景样式
  51.     SecondStyle secondStyle;    //秒针走动样式
  52.     QImage clockBg;             //主背景
  53.     QImage clockHour;           //时钟背景
  54.     QImage clockMin;            //分钟背景
  55.     QImage clockSec;            //秒钟背景
  56.     QImage clockDot;            //中间点背景
  57.     QImage clockHighlights;     //高亮背景
  58.     QStringList imageNames;     //图片名称集合
  59.     QTimer *timer;              //定时器计算时间
  60.     int hour, min, sec, msec;   //时分秒毫秒
  61.     QTimer *timerSpring;        //定时器显示弹簧效果
  62.     double angleSpring;         //弹簧角度
  63.     QAction *action_secondstyle;//秒针样式右键菜单
  64. private Q_SLOTS:
  65.     void doAction();
  66.     void updateTime();
  67.     void updateSpring();
  68. public:
  69.     ClockStyle getClockStyle()      const;
  70.     SecondStyle getSecondStyle()    const;
  71.     QSize sizeHint()                const;
  72.     QSize minimumSizeHint()         const;
  73. public Q_SLOTS:
  74.     //设置图片背景时钟样式
  75.     void setClockStyle(const ClockStyle &clockStyle);
  76.     //设置秒针走动样式
  77.     void setSecondStyle(const SecondStyle &secondStyle);
  78.     //设置系统时间
  79.     void setSystemDateTime(const QString &year, const QString &month, const QString &day,
  80.                            const QString &hour, const QString &min, const QString &sec);
  81. };
  82. #endif // IMAGECLOCK_H

完整代码
  1. #pragma execution_character_set("utf-8")
  2. #include "imageclock.h"
  3. #include "qpainter.h"
  4. #include "qtimer.h"
  5. #include "qdatetime.h"
  6. #include "qmath.h"
  7. #include "qaction.h"
  8. #include "qprocess.h"
  9. #include "qdebug.h"
  10. ImageClock::ImageClock(QWidget *parent): QWidget(parent)
  11. {
  12.     setFont(QFont("Microsoft Yahei", 9));
  13.     QAction *action_trad = new QAction("黑色风格", this);
  14.     connect(action_trad, SIGNAL(triggered(bool)), this, SLOT(doAction()));
  15.     this->addAction(action_trad);
  16.     QAction *action_system = new QAction("银色风格", this);
  17.     connect(action_system, SIGNAL(triggered(bool)), this, SLOT(doAction()));
  18.     this->addAction(action_system);
  19.     QAction *action_modern = new QAction("红色风格", this);
  20.     connect(action_modern, SIGNAL(triggered(bool)), this, SLOT(doAction()));
  21.     this->addAction(action_modern);
  22.     QAction *action_flower = new QAction("花瓣风格", this);
  23.     connect(action_flower, SIGNAL(triggered(bool)), this, SLOT(doAction()));
  24.     this->addAction(action_flower);
  25.     action_secondstyle = new QAction("弹簧效果", this);
  26.     connect(action_secondstyle, SIGNAL(triggered(bool)), this, SLOT(doAction()));
  27.     this->addAction(action_secondstyle);
  28.     this->setContextMenuPolicy(Qt::ActionsContextMenu);
  29.     imageNames << "trad" << "system" << "modern" << "flower";
  30.     timer = new QTimer(this);
  31.     timer->setInterval(1000);
  32.     connect(timer, SIGNAL(timeout()), this, SLOT(updateTime()));
  33.     timer->start();
  34.     timerSpring = new QTimer(this);
  35.     timerSpring->setInterval(30);
  36.     connect(timerSpring, SIGNAL(timeout()), this, SLOT(updateSpring()));
  37.     angleSpring = 6.0 * (sec + (double)msec / 1000);
  38.     setClockStyle(ClockStyle_System);
  39.     setSecondStyle(SecondStyle_Normal);
  40.     updateTime();
  41. }
  42. ImageClock::~ImageClock()
  43. {
  44.     if (timer->isActive()) {
  45.         timer->stop();
  46.     }
  47.     if (timerSpring->isActive()) {
  48.         timerSpring->stop();
  49.     }
  50. }
  51. void ImageClock::paintEvent(QPaintEvent *)
  52. {
  53.     int width = this->width();
  54.     int height = this->height();
  55.     //绘制准备工作,启用反锯齿,启用图片平滑缩放
  56.     QPainter painter(this);
  57.     painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
  58.     painter.setRenderHint(QPainter::SmoothPixmapTransform, true);
  59.     //绘制背景
  60.     drawBg(&painter);
  61.     painter.translate(width / 2, height / 2);
  62.     //绘制时钟指针 尺寸:13×129
  63.     drawHour(&painter);
  64.     //绘制分钟指针 尺寸:13×129
  65.     drawMin(&painter);
  66.     //绘制秒钟指针 尺寸:13×129
  67.     drawSec(&painter);
  68.     //绘制中心盖板
  69.     drawDot(&painter);
  70. }
  71. void ImageClock::drawBg(QPainter *painter)
  72. {
  73.     painter->save();
  74.     int pixX = rect().center().x() - clockBg.width() / 2;
  75.     int pixY = rect().center().y() - clockBg.height() / 2;
  76.     QPoint point(pixX, pixY);
  77.     painter->drawImage(point, clockBg);
  78.     painter->drawImage(point, clockHighlights);
  79.     painter->restore();
  80. }
  81. void ImageClock::drawHour(QPainter *painter)
  82. {
  83.     painter->save();
  84.     painter->rotate(30.0 * ((hour + min / 60.0)));
  85.     painter->drawImage(QRect(-6.5, -64.5, 13, 129), clockHour);
  86.     painter->restore();
  87. }
  88. void ImageClock::drawMin(QPainter *painter)
  89. {
  90.     painter->save();
  91.     painter->rotate(6.0 * (min + sec / 60.0));
  92.     painter->drawImage(QRect(-6.5, -64.5, 13, 129), clockMin);
  93.     painter->restore();
  94. }
  95. void ImageClock::drawSec(QPainter *painter)
  96. {
  97.     if (secondStyle == SecondStyle_Hide) {
  98.         return;
  99.     }
  100.     painter->save();
  101.     painter->rotate(angleSpring);
  102.     painter->drawImage(QRect(-6.5, -64.5, 13, 129), clockSec);
  103.     painter->restore();
  104. }
  105. void ImageClock::drawDot(QPainter *painter)
  106. {
  107.     painter->save();
  108.     painter->drawImage(QRect(-6.5, -64.5, 13, 129), clockDot);
  109.     painter->restore();
  110. }
  111. void ImageClock::doAction()
  112. {
  113.     QAction *action = (QAction *)sender();
  114.     QString str = action->text();
  115.     if (str == "黑色风格") {
  116.         setClockStyle(ClockStyle_Trad);
  117.     } else if (str == "银色风格") {
  118.         setClockStyle(ClockStyle_System);
  119.     } else if (str == "红色风格") {
  120.         setClockStyle(ClockStyle_Modern);
  121.     } else if (str == "花瓣风格") {
  122.         setClockStyle(ClockStyle_Flower);
  123.     } else if (str == "弹簧效果") {
  124.         action->setText("连续效果");
  125.         setSecondStyle(SecondStyle_Spring);
  126.     } else if (str == "连续效果") {
  127.         action->setText("隐藏效果");
  128.         setSecondStyle(SecondStyle_Continue);
  129.     } else if (str == "隐藏效果") {
  130.         action->setText("普通效果");
  131.         setSecondStyle(SecondStyle_Hide);
  132.     } else if (str == "普通效果") {
  133.         action->setText("弹簧效果");
  134.         setSecondStyle(SecondStyle_Normal);
  135.     }
  136. }
  137. void ImageClock::updateTime()
  138. {
  139.     QTime now = QTime::currentTime();
  140.     hour = now.hour();
  141.     min = now.minute();
  142.     sec = now.second();
  143.     msec = now.msec();
  144.     if (secondStyle != SecondStyle_Hide) {
  145.         angleSpring = 6.0 * (sec + (double)msec / 1000);
  146.         if (secondStyle == SecondStyle_Spring) {
  147.             angleSpring += 5;
  148.             timerSpring->start();
  149.         }
  150.     }
  151.     update();
  152. }
  153. void ImageClock::updateSpring()
  154. {
  155.     angleSpring = 6.0 * (sec + (double)msec / 1000);
  156.     update();
  157.     timerSpring->stop();
  158. }
  159. ImageClock::ClockStyle ImageClock::getClockStyle() const
  160. {
  161.     return this->clockStyle;
  162. }
  163. ImageClock::SecondStyle ImageClock::getSecondStyle() const
  164. {
  165.     return this->secondStyle;
  166. }
  167. QSize ImageClock::sizeHint() const
  168. {
  169.     return QSize(130, 130);
  170. }
  171. QSize ImageClock::minimumSizeHint() const
  172. {
  173.     return QSize(130, 130);
  174. }
  175. void ImageClock::setClockStyle(const ClockStyle &clockStyle)
  176. {
  177.     if (this->clockStyle != clockStyle){
  178.         QString imageName = imageNames.at(clockStyle);
  179.         this->clockStyle = clockStyle;
  180.         clockBg = QImage(QString(":/image/clock_%1.png").arg(imageName));
  181.         clockHour = QImage(QString(":/image/clock_%1_h.png").arg(imageName));
  182.         clockMin = QImage(QString(":/image/clock_%1_m.png").arg(imageName));
  183.         clockSec = QImage(QString(":/image/clock_%1_s.png").arg(imageName));
  184.         clockDot = QImage(QString(":/image/clock_%1_dot.png").arg(imageName));
  185.         clockHighlights = QImage(QString(":/image/clock_%1_highlights.png").arg(imageName));
  186.         update();
  187.     }
  188. }
  189. void ImageClock::setSecondStyle(const SecondStyle &secondStyle)
  190. {
  191.     if (this->secondStyle != secondStyle){
  192.         this->secondStyle = secondStyle;
  193.         if (secondStyle == SecondStyle_Continue) {
  194.             timer->setInterval(100);
  195.         } else {
  196.             timer->setInterval(1000);
  197.         }
  198.         if (secondStyle == SecondStyle_Spring) {
  199.             action_secondstyle->setText("连续效果");
  200.         } else if (secondStyle == SecondStyle_Continue) {
  201.             action_secondstyle->setText("隐藏效果");
  202.         } else if (secondStyle == SecondStyle_Hide) {
  203.             action_secondstyle->setText("普通效果");
  204.         } else if (secondStyle == SecondStyle_Normal) {
  205.             action_secondstyle->setText("弹簧效果");
  206.             updateTime();
  207.             return;
  208.         }
  209.         update();
  210.     }
  211. }
  212. void ImageClock::setSystemDateTime(const QString &year, const QString &month, const QString &day,
  213.                                    const QString &hour, const QString &min, const QString &sec)
  214. {
  215. #ifdef Q_OS_WIN
  216.     QProcess p(0);
  217.     p.start("cmd");
  218.     p.waitForStarted();
  219.     p.write(QString("date %1-%2-%3\n").arg(year).arg(month).arg(day).toLatin1());
  220.     p.closeWriteChannel();
  221.     p.waitForFinished(1000);
  222.     p.close();
  223.     p.start("cmd");
  224.     p.waitForStarted();
  225.     p.write(QString("time %1:%2:%3.00\n").arg(hour).arg(min).arg(sec).toLatin1());
  226.     p.closeWriteChannel();
  227.     p.waitForFinished(1000);
  228.     p.close();
  229. #else
  230.     QString cmd = QString("date %1%2%3%4%5.%6").arg(month).arg(day).arg(hour).arg(min).arg(year).arg(sec);
  231.     system(cmd.toLatin1());
  232.     system("hwclock -w");
  233. #endif
  234. }

控件介绍
1. 超过145个精美控件,涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏,flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
2. 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量。qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。
3. 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到Qt5.12的任何Qt版本,支持mingw、msvc、gcc等编译器,不乱码,可直接集成到Qt  Creator中,和自带的控件一样使用,大部分效果只要设置几个属性即可,极为方便。
4. 每个控件都有一个对应的单独的包含该控件源码的DEMO,方便参考使用。同时还提供一个所有控件使用的集成的DEMO。
5. 每个控件的源代码都有详细中文注释,都按照统一设计规范编写,方便学习自定义控件的编写。
6. 每个控件默认配色和demo对应的配色都非常精美。
7. 超过130个可见控件,6个不可见控件。
8. 部分控件提供多种样式风格选择,多种指示器样式选择。
9. 所有控件自适应窗体拉伸变化。
10.  集成自定义控件属性设计器,支持拖曳设计,所见即所得,支持导入导出xml格式。
11. 自带activex控件demo,所有控件可以直接运行在ie浏览器中。
12. 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体,享受图形字体带来的乐趣。
13. 所有控件最后生成一个dll动态库文件,可以直接集成到qtcreator中拖曳设计使用。
SDK下载
- SDK下载链接:https://pan.baidu.com/s/1tD9v1YPfE2fgYoK6lqUr1Q 提取码:lyhk
- 自定义控件+属性设计器欣赏:https://pan.baidu.com/s/1l6L3rKSiLu_uYi7lnL3ibQ 提取码:tmvl
- 下载链接中包含了各个版本的动态库文件,所有控件的头文件,使用demo。
- 自定义控件插件开放动态库dll使用(永久免费),无任何后门和限制,请放心使用。
- 目前已提供26个版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控件和完善控件,不定期更新SDK,欢迎各位提出建议,谢谢!
- widget版本(QQ:517216493)qml版本(QQ:373955953)三峰驼(QQ:278969898)。
  

欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线greensky10

只看该作者 1楼 发表于: 2019-05-14
感谢刘大佬分享!!!
快速回复
限100 字节
 
上一个 下一个