发帖 回复
返回列表
  • 3558阅读
  • 3回复

Qt编写自定义控件5-柱状温度计 [复制链接]

 上一主题 下一主题
离线liudianwu
总版主
 
图酷模式  只看楼主 倒序阅读 楼主  发表于: 2019-04-23
前言
柱状温度计控件，可能是很多人练手控件之一，基本上都是垂直方向展示，底部一个水银柱，中间刻度尺，刻度尺可以在左侧右侧或者两侧都有，自适应分辨率改动，有时候为了美观效果，可能还会整个定时器来实现动画效果，开启动画效果的缺点就是CPU占用会比较高，前阵子有个好友（贾文涛-涛哥）向我推荐了一个opengl绘制的开源东西，QNanoPainter，东西是个好东西，我个人的理解是直接封装了opengl绘制的qpainter，可以使得绘制全部走GPU，这样就可以大大减轻CPU的负担，非常方便，我自己试了下，方法和绘制逻辑和qpainter有点不一样，暂时没有将所有控件改成QNanoPainter版本，以后看情况吧。

实现的功能
* 1:可设置精确度(小数点后几位)和间距
* 2:可设置背景色/柱状颜色/线条颜色
* 3:可设置长线条步长及短线条步长
* 4:可启用动画及动画步长
* 5:可设置范围值
* 6:支持负数刻度值
* 7:支持任意窗体大小缩放
* 8:可设置柱状条位置 左侧 居中 右侧
* 9:可设置刻度尺位置 无 左侧 右侧 两侧
* 10:可设置用户设定目标值

效果图



头文件代码
复制代码
  1. #ifndef RULERTEMP_H
  2. #define RULERTEMP_H
  4. /**
  5. * 柱状温度计控件 作者:feiyangqingyun(QQ:517216493) 2016-11-4
  6. * 1:可设置精确度(小数点后几位)和间距
  7. * 2:可设置背景色/柱状颜色/线条颜色
  8. * 3:可设置长线条步长及短线条步长
  9. * 4:可启用动画及动画步长
  10. * 5:可设置范围值
  11. * 6:支持负数刻度值
  12. * 7:支持任意窗体大小缩放
  13. * 8:可设置柱状条位置 左侧 居中 右侧
  14. * 9:可设置刻度尺位置 无 左侧 右侧 两侧
  15. * 10:可设置用户设定目标值
  16. */
  18. #include <QWidget>
  20. #ifdef quc
  21. #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
  22. #include <QtDesigner/QDesignerExportWidget>
  23. #else
  24. #include <QtUiPlugin/QDesignerExportWidget>
  25. #endif
  27. class QDESIGNER_WIDGET_EXPORT RulerTemp : public QWidget
  28. #else
  29. class RulerTemp : public QWidget
  30. #endif
  32. {
  33.     Q_OBJECT
  34.     Q_ENUMS(BarPosition)
  35.     Q_ENUMS(TickPosition)
  37.     Q_PROPERTY(double minValue READ getMinValue WRITE setMinValue)
  38.     Q_PROPERTY(double maxValue READ getMaxValue WRITE setMaxValue)
  39.     Q_PROPERTY(double value READ getValue WRITE setValue)
  41.     Q_PROPERTY(int precision READ getPrecision WRITE setPrecision)
  42.     Q_PROPERTY(int longStep READ getLongStep WRITE setLongStep)
  43.     Q_PROPERTY(int shortStep READ getShortStep WRITE setShortStep)
  44.     Q_PROPERTY(int space READ getSpace WRITE setSpace)
  46.     Q_PROPERTY(bool animation READ getAnimation WRITE setAnimation)
  47.     Q_PROPERTY(double animationStep READ getAnimationStep WRITE setAnimationStep)
  49.     Q_PROPERTY(bool showUserValue READ getShowUserValue WRITE setShowUserValue)
  50.     Q_PROPERTY(double userValue READ getUserValue WRITE setUserValue)
  51.     Q_PROPERTY(QColor userValueColor READ getUserValueColor WRITE setUserValueColor)
  53.     Q_PROPERTY(QColor bgColorStart READ getBgColorStart WRITE setBgColorStart)
  54.     Q_PROPERTY(QColor bgColorEnd READ getBgColorEnd WRITE setBgColorEnd)
  55.     Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor)
  56.     Q_PROPERTY(QColor barBgColor READ getBarBgColor WRITE setBarBgColor)
  57.     Q_PROPERTY(QColor barColor READ getBarColor WRITE setBarColor)
  59.     Q_PROPERTY(BarPosition barPosition READ getBarPosition WRITE setBarPosition)
  60.     Q_PROPERTY(TickPosition tickPosition READ getTickPosition WRITE setTickPosition)
  62. public:
  63.     enum BarPosition {
  64.         BarPosition_Left = 0,       //左侧显示
  65.         BarPosition_Right = 1,      //右侧显示
  66.         BarPosition_Center = 2      //居中显示
  67.     };
  69.     enum TickPosition {
  70.         TickPosition_Null = 0,      //不显示
  71.         TickPosition_Left = 1,      //左侧显示
  72.         TickPosition_Right = 2,     //右侧显示
  73.         TickPosition_Both = 3       //两侧显示
  74.     };
  76.     explicit RulerTemp(QWidget *parent = 0);
  77.     ~RulerTemp();
  79. protected:
  80.     void resizeEvent(QResizeEvent *);
  81.     void paintEvent(QPaintEvent *);
  82.     void drawBg(QPainter *painter);
  83.     void drawBarBg(QPainter *painter);
  84.     void drawRuler(QPainter *painter, int type);
  85.     void drawBar(QPainter *painter);
  86.     void drawValue(QPainter *painter);
  88. private:
  89.     double minValue;                //最小值
  90.     double maxValue;                //最大值
  91.     double value;                   //目标值
  93.     int precision;                  //精确度,小数点后几位
  94.     int longStep;                   //长线条等分步长
  95.     int shortStep;                  //短线条等分步长
  96.     int space;                      //间距
  98.     bool animation;                 //是否启用动画显示
  99.     double animationStep;           //动画显示时步长
  101.     bool showUserValue;             //显示用户设定值
  102.     double userValue;               //用户设定值
  103.     QColor userValueColor;          //用户设定值颜色
  105.     QColor bgColorStart;            //背景渐变开始颜色
  106.     QColor bgColorEnd;              //背景渐变结束颜色
  107.     QColor lineColor;               //线条颜色
  108.     QColor barBgColor;              //柱状背景色
  109.     QColor barColor;                //柱状颜色
  111.     BarPosition barPosition;        //柱状条位置
  112.     TickPosition tickPosition;      //刻度尺位置
  114.     int barWidth;                   //水银柱宽度
  115.     int barHeight;                  //水银柱高度
  116.     int radius;                     //水银柱底部圆半径
  117.     int targetX;                    //目标X坐标
  118.     QRectF barRect;                 //柱状区域
  119.     QRectF circleRect;              //底部圆区域
  121.     bool reverse;                   //是否倒退
  122.     double currentValue;            //当前值
  123.     QTimer *timer;                  //定时器绘制动画
  125. private slots:
  126.     void updateValue();
  128. public:
  129.     double getMinValue()            const;
  130.     double getMaxValue()            const;
  131.     double getValue()               const;
  133.     int getPrecision()              const;
  134.     int getLongStep()               const;
  135.     int getShortStep()              const;
  136.     int getSpace()                  const;
  138.     bool getAnimation()             const;
  139.     double getAnimationStep()       const;
  141.     bool getShowUserValue()         const;
  142.     double getUserValue()           const;
  143.     QColor getUserValueColor()      const;
  145.     QColor getBgColorStart()        const;
  146.     QColor getBgColorEnd()          const;
  147.     QColor getLineColor()           const;
  148.     QColor getBarBgColor()          const;
  149.     QColor getBarColor()            const;
  151.     BarPosition getBarPosition()    const;
  152.     TickPosition getTickPosition()  const;
  154.     QSize sizeHint()                const;
  155.     QSize minimumSizeHint()         const;
  157. public Q_SLOTS:
  158.     //设置最大最小值-范围值
  159.     void setRange(double minValue, double maxValue);
  160.     void setRange(int minValue, int maxValue);
  162.     //设置最大最小值
  163.     void setMinValue(double minValue);
  164.     void setMaxValue(double maxValue);
  166.     //设置目标值
  167.     void setValue(double value);
  168.     void setValue(int value);
  170.     //设置精确度
  171.     void setPrecision(int precision);
  173.     //设置线条等分步长
  174.     void setLongStep(int longStep);
  175.     void setShortStep(int shortStep);
  177.     //设置间距
  178.     void setSpace(int space);
  180.     //设置是否启用动画显示
  181.     void setAnimation(bool animation);
  182.     //设置动画显示的步长
  183.     void setAnimationStep(double animationStep);
  185.     //设置是否显示用户设定值
  186.     void setShowUserValue(bool showUserValue);
  188.     //设置用户值
  189.     void setUserValue(double userValue);
  190.     void setUserValue(int userValue);
  192.     //设置用户设定值颜色
  193.     void setUserValueColor(const QColor &userValueColor);
  195.     //设置背景颜色
  196.     void setBgColorStart(const QColor &bgColorStart);
  197.     void setBgColorEnd(const QColor &bgColorEnd);
  199.     //设置线条颜色
  200.     void setLineColor(const QColor &lineColor);
  202.     //设置柱状颜色
  203.     void setBarBgColor(const QColor &barBgColor);
  204.     void setBarColor(const QColor &barColor);
  206.     //设置柱状条位置
  207.     void setBarPosition(const BarPosition &barPosition);
  209.     //设置刻度尺位置
  210.     void setTickPosition(const TickPosition &tickPosition);
  212. Q_SIGNALS:
  213.     void valueChanged(double value);
  214. };
  216. #endif // RULERTEMP_H
核心代码
复制代码
  1. void RulerTemp::paintEvent(QPaintEvent *)
  2. {
  3.     //绘制准备工作,启用反锯齿
  4.     QPainter painter(this);
  5.     painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
  7.     //绘制背景
  8.     drawBg(&painter);
  10.     //绘制标尺及刻度尺
  11.     if (tickPosition == TickPosition_Left) {
  12.         drawRuler(&painter, 0);
  13.     } else if (tickPosition == TickPosition_Right) {
  14.         drawRuler(&painter, 1);
  15.     } else if (tickPosition == TickPosition_Both) {
  16.         drawRuler(&painter, 0);
  17.         drawRuler(&painter, 1);
  18.     }
  20.     //绘制水银柱背景,包含水银柱底部圆
  21.     drawBarBg(&painter);
  23.     //绘制当前水银柱,包含水银柱底部圆
  24.     drawBar(&painter);
  26.     //绘制当前值
  27.     drawValue(&painter);
  28. }
  30. void RulerTemp::drawBg(QPainter *painter)
  31. {
  32.     painter->save();
  33.     painter->setPen(Qt::NoPen);
  34.     QLinearGradient bgGradient(QPointF(0, 0), QPointF(0, height()));
  35.     bgGradient.setColorAt(0.0, bgColorStart);
  36.     bgGradient.setColorAt(1.0, bgColorEnd);
  37.     painter->setBrush(bgGradient);
  38.     painter->drawRect(rect());
  39.     painter->restore();
  40. }
  42. void RulerTemp::drawBarBg(QPainter *painter)
  43. {
  44.     painter->save();
  45.     painter->setPen(Qt::NoPen);
  46.     painter->setBrush(barBgColor);
  48.     int barX = targetX - barWidth / 2;
  49.     int barY = space;
  50.     QRectF barRect(barX, barY, barWidth, barHeight);
  52.     int circleX = targetX - radius;
  53.     //偏移 2 个像素,使得看起来边缘完整
  54.     int circleY = height() - radius * 2 - 2;
  55.     int circleWidth = radius * 2;
  56.     QRectF circleRect(circleX, circleY, circleWidth, circleWidth);
  58.     QPainterPath path;
  59.     path.addRect(barRect);
  60.     path.addEllipse(circleRect);
  61.     path.setFillRule(Qt::WindingFill);
  62.     painter->drawPath(path);
  63.     painter->restore();
  64. }
  66. void RulerTemp::drawRuler(QPainter *painter, int type)
  67. {
  68.     painter->save();
  69.     painter->setPen(lineColor);
  71.     int barPercent = barWidth / 8;
  73.     if (barPercent < 2) {
  74.         barPercent = 2;
  75.     }
  77.     //绘制纵向标尺刻度
  78.     double length = height() - 2 * space - 2 * radius;
  79.     //计算每一格移动多少
  80.     double increment = length / (maxValue - minValue);
  82.     //长线条短线条长度
  83.     int longLineLen = 10;
  84.     int shortLineLen = 7;
  86.     //绘制纵向标尺线 偏移 5 像素
  87.     int offset = barWidth / 2 + 5;
  89.     //左侧刻度尺需要重新计算
  90.     if (type == 0) {
  91.         offset = -offset;
  92.         longLineLen = -longLineLen;
  93.         shortLineLen = -shortLineLen;
  94.     }
  96.     double initX = targetX + offset;
  97.     double initY = space + barPercent;
  98.     QPointF topPot(initX, initY);
  99.     QPointF bottomPot(initX, height() - 2 * radius - 5);
  100.     painter->drawLine(topPot, bottomPot);
  102.     //根据范围值绘制刻度值及刻度值
  103.     for (int i = maxValue; i >= minValue; i = i - shortStep) {
  104.         if (i % longStep == 0) {
  105.             //绘制长线条
  106.             QPointF leftPot(initX + longLineLen, initY);
  107.             QPointF rightPot(initX, initY);
  108.             painter->drawLine(leftPot, rightPot);
  110.             //绘制文字
  111.             QString strValue = QString("%1").arg((double)i, 0, 'f', precision);
  112.             double fontHeight = painter->fontMetrics().height();
  114.             if (type == 0) {
  115.                 QRect textRect(initX - 45, initY - fontHeight / 3, 30, 15);
  116.                 painter->drawText(textRect, Qt::AlignRight, strValue);
  117.             } else if (type == 1) {
  118.                 QRect textRect(initX + longLineLen + 5, initY - fontHeight / 3, 30, 15);
  119.                 painter->drawText(textRect, Qt::AlignLeft, strValue);
  120.             }
  121.         } else {
  122.             //绘制短线条
  123.             QPointF leftPot(initX + shortLineLen, initY);
  124.             QPointF rightPot(initX, initY);
  125.             painter->drawLine(leftPot, rightPot);
  126.         }
  128.         initY += increment * shortStep;
  129.     }
  131.     painter->restore();
  132. }
  134. void RulerTemp::drawBar(QPainter *painter)
  135. {
  136.     painter->save();
  137.     painter->setPen(Qt::NoPen);
  138.     painter->setBrush(barColor);
  140.     //计算在背景宽度的基础上缩小的百分比, 至少为 2
  141.     int barPercent = barWidth / 8;
  142.     int circlePercent = radius / 6;
  144.     if (barPercent < 2) {
  145.         barPercent = 2;
  146.     }
  148.     if (circlePercent < 2) {
  149.         circlePercent = 2;
  150.     }
  152.     //标尺刻度高度
  153.     double length = height() - 2 * space - 2 * radius;
  154.     //计算每一格移动多少
  155.     double increment = length / (maxValue - minValue);
  156.     //计算标尺的高度
  157.     int rulerHeight = height() - 1 * space - 2 * radius;
  159.     int barX = targetX - barWidth / 2;
  160.     int barY = rulerHeight - (currentValue - minValue) * increment;
  161.     barRect = QRectF(barX + barPercent, barY + barPercent, barWidth - barPercent * 2, barHeight + radius - barY);
  163.     int circleX = targetX - radius;
  164.     //偏移 2 个像素,使得看起来边缘完整
  165.     int circleY = height() - radius * 2 - 2;
  166.     int circleWidth = radius * 2 - circlePercent * 2;
  167.     circleRect = QRectF(circleX + circlePercent, circleY + circlePercent, circleWidth, circleWidth);
  169.     QPainterPath path;
  170.     path.addRect(barRect);
  171.     path.addEllipse(circleRect);
  172.     path.setFillRule(Qt::WindingFill);
  173.     painter->drawPath(path);
  175.     //绘制用户设定值三角号
  176.     if (showUserValue) {
  177.         if (tickPosition == TickPosition_Left || tickPosition == TickPosition_Both) {
  178.             QPolygon pts;
  179.             int offset = 15;
  180.             double initX = targetX - (barWidth / 2 + 5);
  181.             double initY = rulerHeight - (userValue - minValue) * increment;
  182.             pts.append(QPoint(initX, initY));
  183.             pts.append(QPoint(initX - offset, initY - offset / 2));
  184.             pts.append(QPoint(initX - offset, initY + offset / 2));
  185.             painter->setBrush(userValueColor);
  186.             painter->drawPolygon(pts);
  187.         }
  189.         if (tickPosition == TickPosition_Right || tickPosition == TickPosition_Both) {
  190.             QPolygon pts;
  191.             int offset = 15;
  192.             double initX = targetX + (barWidth / 2 + 5);
  193.             double initY = rulerHeight - (userValue - minValue) * increment;
  194.             pts.append(QPoint(initX, initY));
  195.             pts.append(QPoint(initX + offset, initY - offset / 2));
  196.             pts.append(QPoint(initX + offset, initY + offset / 2));
  197.             painter->setBrush(userValueColor);
  198.             painter->drawPolygon(pts);
  199.         }
  200.     }
  202.     painter->restore();
  203. }
  205. void RulerTemp::drawValue(QPainter *painter)
  206. {
  207.     painter->save();
  209.     QFont font;
  210.     font.setPixelSize(circleRect.width() * 0.55);
  211.     painter->setFont(font);
  212.     painter->setPen(Qt::white);
  213.     painter->drawText(circleRect, Qt::AlignCenter, QString("%1").arg(currentValue));
  215.     painter->restore();
  216. }

控件介绍

1. 超过130个精美控件，涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏，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. 超过120个可见控件，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/14iIecP4QLpYvreM1ZDN-dA  提取码：6rj4
- 属性设计器欣赏：https://pan.baidu.com/s/165aJuS_ukR6VGugbtGaf4g  提取码：6014
- 下载链接中包含了各个版本的动态库文件，所有控件的头文件，使用demo。
- 自定义控件插件开放动态库dll使用（永久免费），无任何后门和限制，请放心使用。
- widget版本（QQ：517216493）qml版本（QQ：373955953）三峰驼（QQ：278969898）。
  
欢迎关注微信公众号：Qt实战/Qt入门和进阶(各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发) QQ：517216493  WX：feiyangqingyun  QQ群：751439350
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线九重水
圣骑士
只看该作者 1楼 发表于: 2019-04-23
看来老刘铁了心要做卖自定义控件的生意了。加油吧。不过，记得上交广告费。
回复
举报
离线305750665
侠客
只看该作者 2楼 发表于: 2019-04-23
     顶起，顶起
雨田哥： 群号:853086607
QQ: 3246214072

刘典武-feiyangqingyun：专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信，童叟无欺，量大从优，欢迎咨询购买定制！QQ：517216493
回复
举报
离线crazy
侠客
只看该作者 3楼 发表于: 2019-04-24
我顶
C/C++/Qt爱好者
邮箱: kevinlq0912@163.com
公众号: devstone
博客:http://kevinlq.com/
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个