找回密码
 立即注册
收起左侧

Qt编写自定义控件54-时钟仪表盘

0
回复
106
查看
[复制链接]
累计签到:7 天
连续签到:1 天
来源: 2019-9-20 09:41:09 显示全部楼层 |阅读模式

马上注册,查看详细内容!注册请先查看:注册须知

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一、前言
这个控件没有太多的应用场景,主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘制,甚至还有qml版本,本控件无非就是一个仪表边框加上时钟分钟刻度再加上时分秒指针,打完收工,我是在此基础上增加了可以设置各种颜色,然后鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果,弹簧效果的意思是秒钟走动的时候,先移动到超过指定位置,然后又重新弹回来,连续效果的意思是将步长减少,一点点的移动,将秒钟的定时器精度调高。还有一个新增的功能是内置了设置系统时间公共槽函数,支持任意操作系统。

二、实现的功能
* 1:可设置边框颜色
* 2:可设置前景色背景色
* 3:可设置时钟分钟秒钟指针颜色
* 4:可设置刷新间隔
* 5:鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果
* 6:增加设置系统时间公共槽函数,支持任意操作系统

三、效果图



四、头文件代码
  1. #ifndef GAUGECLOCK_H
  2. #define GAUGECLOCK_H

  3. /**
  4. * 时钟仪表盘控件 作者:feiyangqingyun(QQ:517216493) 2016-10-23
  5. * 1:可设置边框颜色
  6. * 2:可设置前景色背景色
  7. * 3:可设置时钟分钟秒钟指针颜色
  8. * 4:可设置刷新间隔
  9. * 5:鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果
  10. * 6:增加设置系统时间公共槽函数,支持任意操作系统
  11. */

  12. #include <QWidget>

  13. #ifdef quc
  14. #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
  15. #include <QtDesigner/QDesignerExportWidget>
  16. #else
  17. #include <QtUiPlugin/QDesignerExportWidget>
  18. #endif

  19. class QDESIGNER_WIDGET_EXPORT GaugeClock : public QWidget
  20. #else
  21. class GaugeClock : public QWidget
  22. #endif

  23. {
  24.         Q_OBJECT
  25.         Q_ENUMS(SecondStyle)

  26.         Q_PROPERTY(QColor crownColorStart READ getCrownColorStart WRITE setCrownColorStart)
  27.         Q_PROPERTY(QColor crownColorEnd READ getCrownColorEnd WRITE setCrownColorEnd)

  28.         Q_PROPERTY(QColor foreground READ getForeground WRITE setForeground)
  29.         Q_PROPERTY(QColor background READ getBackground WRITE setBackground)

  30.         Q_PROPERTY(QColor pointerHourColor READ getPointerHourColor WRITE setPointerHourColor)
  31.         Q_PROPERTY(QColor pointerMinColor READ getPointerMinColor WRITE setPointerMinColor)
  32.         Q_PROPERTY(QColor pointerSecColor READ getPointerSecColor WRITE setPointerSecColor)

  33.     Q_PROPERTY(SecondStyle secondStyle READ getSecondStyle WRITE setSecondStyle)

  34. public:
  35.         enum SecondStyle {
  36.                 SecondStyle_Normal = 0,     //普通效果
  37.                 SecondStyle_Spring = 1,     //弹簧效果
  38.                 SecondStyle_Continue = 2,   //连续效果
  39.                 SecondStyle_Hide = 3        //隐藏效果
  40.         };

  41.         explicit GaugeClock(QWidget *parent = 0);
  42.         ~GaugeClock();

  43. protected:
  44.         void paintEvent(QPaintEvent *);
  45.         void drawCrown(QPainter *painter);
  46.         void drawBg(QPainter *painter);
  47.         void drawScale(QPainter *painter);
  48.         void drawScaleNum(QPainter *painter);
  49.         void drawHour(QPainter *painter);
  50.         void drawMin(QPainter *painter);
  51.         void drawSec(QPainter *painter);
  52.         void drawDot(QPainter *painter);

  53. private:
  54.     QColor crownColorStart;         //外边框渐变开始颜色
  55.         QColor crownColorEnd;           //外边框渐变结束颜色

  56.         QColor foreground;              //前景色
  57.         QColor background;              //背景色

  58.         QColor pointerHourColor;        //时钟指针颜色
  59.         QColor pointerMinColor;         //分钟指针颜色
  60.         QColor pointerSecColor;         //秒钟指针颜色

  61.     SecondStyle secondStyle;        //秒针走动样式

  62.         QTimer *timer;                  //定时器绘制
  63.         int hour, min, sec, msec;       //时分秒毫秒

  64.         QTimer *timerSpring;            //定时器显示弹簧效果
  65.         double angleSpring;             //弹簧角度

  66.         QAction *action_secondstyle;    //秒针样式右键菜单

  67. private slots:
  68.         void doAction();
  69.         void updateTime();
  70.         void updateSpring();

  71. public:
  72.         SecondStyle getSecondStyle()    const;

  73.         QColor getCrownColorStart()     const;
  74.         QColor getCrownColorEnd()       const;

  75.         QColor getForeground()          const;
  76.         QColor getBackground()          const;

  77.         QColor getPointerHourColor()    const;
  78.         QColor getPointerMinColor()     const;
  79.         QColor getPointerSecColor()     const;

  80.         QSize sizeHint()                const;
  81.         QSize minimumSizeHint()         const;

  82. public Q_SLOTS:
  83.         //设置秒针走动样式
  84.     void setSecondStyle(const SecondStyle &secondStyle);
  85.         //设置系统时间
  86.     void setSystemDateTime(const QString &year, const QString &month, const QString &day,
  87.                            const QString &hour, const QString &min, const QString &sec);

  88.         //设置外边框渐变颜色
  89.     void setCrownColorStart(const QColor &crownColorStart);
  90.     void setCrownColorEnd(const QColor &crownColorEnd);

  91.         //设置前景色
  92.     void setForeground(const QColor &foreground);
  93.         //设备背景色
  94.     void setBackground(const QColor &background);

  95.         //设置时钟指针颜色
  96.     void setPointerHourColor(const QColor &pointerHourColor);
  97.         //设置分钟指针颜色
  98.     void setPointerMinColor(const QColor &pointerMinColor);
  99.         //设置秒钟指针颜色
  100.     void setPointerSecColor(const QColor &pointerSecColor);
  101. };

  102. #endif // GAUGECLOCK_H
复制代码


五、核心代码
  1. void GaugeClock::paintEvent(QPaintEvent *)
  2. {
  3.     int width = this->width();
  4.     int height = this->height();
  5.     int side = qMin(width, height);

  6.     //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
  7.     QPainter painter(this);
  8.     painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
  9.     painter.translate(width / 2, height / 2);   
  10.     painter.scale(side / 200.0, side / 200.0);

  11.     //绘制外边框
  12.     drawCrown(&painter);
  13.     //绘制背景
  14.     drawBg(&painter);
  15.     //绘制刻度线
  16.     drawScale(&painter);
  17.     //绘制刻度值
  18.     drawScaleNum(&painter);
  19.     //绘制时钟指针
  20.     drawHour(&painter);
  21.     //绘制分钟指针
  22.     drawMin(&painter);
  23.     //绘制秒钟指针
  24.     drawSec(&painter);
  25.     //绘制中心盖板
  26.     drawDot(&painter);
  27. }

  28. void GaugeClock::drawCrown(QPainter *painter)
  29. {
  30.     int radius = 99;
  31.     painter->save();
  32.     painter->setPen(Qt::NoPen);
  33.     QLinearGradient crownGradient(0, -radius, 0, radius);
  34.     crownGradient.setColorAt(0, crownColorStart);
  35.     crownGradient.setColorAt(1, crownColorEnd);
  36.     painter->setBrush(crownGradient);
  37.     painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
  38.     painter->restore();
  39. }

  40. void GaugeClock::drawBg(QPainter *painter)
  41. {
  42.     int radius = 92;
  43.     painter->save();
  44.     painter->setPen(Qt::NoPen);
  45.     painter->setBrush(background);
  46.     painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
  47.     painter->restore();
  48. }

  49. void GaugeClock::drawScale(QPainter *painter)
  50. {
  51.     int radius = 90;
  52.     painter->save();

  53.     QPen pen;
  54.     pen.setColor(foreground);
  55.     pen.setCapStyle(Qt::RoundCap);

  56.     for (int i = 0; i <= 60; i++) {
  57.         if (i % 5 == 0) {
  58.             pen.setWidthF(1.5);
  59.             painter->setPen(pen);
  60.             painter->drawLine(0, radius - 10, 0, radius);
  61.         } else {
  62.             pen.setWidthF(0.5);
  63.             painter->setPen(pen);
  64.             painter->drawLine(0, radius - 5, 0, radius);
  65.         }

  66.         painter->rotate(6);
  67.     }

  68.     painter->restore();
  69. }

  70. void GaugeClock::drawScaleNum(QPainter *painter)
  71. {
  72.     int radius = 70;
  73.     painter->save();
  74.     painter->setPen(foreground);

  75.     double startRad = 60 * (M_PI / 180);
  76.     double deltaRad = 30 * (M_PI / 180);

  77.     for (int i = 0; i < 12; i++) {
  78.         double sina = qSin(startRad - i * deltaRad);
  79.         double cosa = qCos(startRad - i * deltaRad);
  80.         QString strValue = QString("%1").arg(i + 1);

  81.         double textWidth = fontMetrics().width(strValue);
  82.         double textHeight = fontMetrics().height();
  83.         int x = radius * cosa - textWidth / 2;
  84.         int y = -radius * sina + textHeight / 4;
  85.         painter->drawText(x, y, strValue);
  86.     }

  87.     painter->restore();
  88. }

  89. void GaugeClock::drawHour(QPainter *painter)
  90. {
  91.     painter->save();

  92.     //设置画笔平滑圆角
  93.     QPen pen;
  94.     pen.setCapStyle(Qt::RoundCap);
  95.     painter->setPen(pointerHourColor);
  96.     painter->setBrush(pointerHourColor);

  97.     QPolygon pts;
  98.     pts.setPoints(4, -3, 8, 3, 8, 2, -40, -2, -40);   

  99.     painter->rotate(30.0 * ((hour + min / 60.0)));   
  100.     painter->drawConvexPolygon(pts);

  101.     painter->restore();
  102. }

  103. void GaugeClock::drawMin(QPainter *painter)
  104. {
  105.     painter->save();

  106.     //设置画笔平滑圆角
  107.     QPen pen;
  108.     pen.setCapStyle(Qt::RoundCap);
  109.     painter->setPen(pointerMinColor);
  110.     painter->setBrush(pointerMinColor);

  111.     QPolygon pts;
  112.     pts.setPoints(4, -2, 8, 2, 8, 1, -60, -1, -60);

  113.     painter->rotate(6.0 * (min + sec / 60.0));   
  114.     painter->drawConvexPolygon(pts);

  115.     painter->restore();
  116. }

  117. void GaugeClock::drawSec(QPainter *painter)
  118. {
  119.     if (secondStyle == SecondStyle_Hide) {
  120.         return;
  121.     }

  122.     painter->save();

  123.     //设置画笔平滑圆角
  124.     QPen pen;
  125.     pen.setCapStyle(Qt::RoundCap);
  126.     painter->setPen(pointerSecColor);
  127.     painter->setBrush(pointerSecColor);

  128.     QPolygon pts;
  129.     pts.setPoints(3, -1, 10, 1, 10, 0, -70);

  130.     painter->rotate(angleSpring);
  131.     painter->drawConvexPolygon(pts);

  132.     painter->restore();
  133. }

  134. void GaugeClock::drawDot(QPainter *painter)
  135. {
  136.     painter->save();
  137.     QConicalGradient coneGradient(0, 0, -90.0);
  138.     coneGradient.setColorAt(0.0, background);
  139.     coneGradient.setColorAt(0.5, foreground);
  140.     coneGradient.setColorAt(1.0, background);
  141.     painter->setOpacity(0.9);
  142.     painter->setPen(Qt::NoPen);
  143.     painter->setBrush(coneGradient);
  144.     painter->drawEllipse(-5, -5, 10, 10);
  145.     painter->restore();
  146. }

  147. void GaugeClock::doAction()
  148. {
  149.     QAction *action = (QAction *)sender();
  150.     QString str = action->text();

  151.     if (str == "弹簧效果") {
  152.         action->setText("连续效果");
  153.         setSecondStyle(SecondStyle_Spring);
  154.     } else if (str == "连续效果") {
  155.         action->setText("隐藏效果");
  156.         setSecondStyle(SecondStyle_Continue);
  157.     } else if (str == "隐藏效果") {
  158.         action->setText("普通效果");
  159.         setSecondStyle(SecondStyle_Hide);
  160.     } else if (str == "普通效果") {
  161.         action->setText("弹簧效果");
  162.         setSecondStyle(SecondStyle_Normal);
  163.     }
  164. }
复制代码


六、控件介绍
1. 超过150个精美控件,涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏,flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
2. 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量。qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。
3. 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到Qt5.13的任何Qt版本,支持mingw、msvc、gcc等编译器,支持任意操作系统比如windows+linux+mac+嵌入式linux等,不乱码,可直接集成到Qt  Creator中,和自带的控件一样使用,大部分效果只要设置几个属性即可,极为方便。
4. 每个控件都有一个对应的单独的包含该控件源码的DEMO,方便参考使用。同时还提供一个所有控件使用的集成的DEMO。
5. 每个控件的源代码都有详细中文注释,都按照统一设计规范编写,方便学习自定义控件的编写。
6. 每个控件默认配色和demo对应的配色都非常精美。
7. 超过130个可见控件,6个不可见控件。
8. 部分控件提供多种样式风格选择,多种指示器样式选择。
9. 所有控件自适应窗体拉伸变化。
10. 集成自定义控件属性设计器,支持拖曳设计,所见即所得,支持导入导出xml格式。
11. 自带activex控件demo,所有控件可以直接运行在ie浏览器中。
12. 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体,享受图形字体带来的乐趣。
13. 所有控件最后生成一个动态库文件(dll或者so等),可以直接集成到qtcreator中拖曳设计使用。
14. 目前已经有qml版本,后期会考虑出pyqt版本,如果用户需求量很大的话。
15. 自定义控件插件开放动态库使用(永久免费),无任何后门和限制,请放心使用。
16. 目前已提供26个版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
17. 不定期增加控件和完善控件,不定期更新SDK,欢迎各位提出建议,谢谢!
18. Qt入门书籍推荐霍亚飞的《Qt Creator快速入门》《Qt5编程入门》,Qt进阶书籍推荐官方的《C++ GUI Qt4编程》。
19. 强烈推荐程序员自我修养和规划系列书《大话程序员》《程序员的成长课》《解忧程序员》,受益匪浅,受益终生!
20. SDK下载链接:[https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ](https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ) 提取码:877p

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册