Qt编写自定义控件5-柱状温度计

2023-11-26 14:10
文章标签 自定义 qt 编写 控件 温度计 柱状

本文主要是介绍Qt编写自定义控件5-柱状温度计，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

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

实现的功能

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

效果图

63094-20190423090317780-1636143938.gif

头文件代码

#ifndef RULERTEMP_H
#define RULERTEMP_H/*** 柱状温度计控件 作者:feiyangqingyun(QQ:517216493) 2016-11-4* 1:可设置精确度(小数点后几位)和间距* 2:可设置背景色/柱状颜色/线条颜色* 3:可设置长线条步长及短线条步长* 4:可启用动画及动画步长* 5:可设置范围值* 6:支持负数刻度值* 7:支持任意窗体大小缩放* 8:可设置柱状条位置 左侧 居中 右侧* 9:可设置刻度尺位置 无 左侧 右侧 两侧* 10:可设置用户设定目标值*/#include <QWidget>#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endifclass QDESIGNER_WIDGET_EXPORT RulerTemp : public QWidget
#else
class RulerTemp : public QWidget
#endif{Q_OBJECTQ_ENUMS(BarPosition)Q_ENUMS(TickPosition)Q_PROPERTY(double minValue READ getMinValue WRITE setMinValue)Q_PROPERTY(double maxValue READ getMaxValue WRITE setMaxValue)Q_PROPERTY(double value READ getValue WRITE setValue)Q_PROPERTY(int precision READ getPrecision WRITE setPrecision)Q_PROPERTY(int longStep READ getLongStep WRITE setLongStep)Q_PROPERTY(int shortStep READ getShortStep WRITE setShortStep)Q_PROPERTY(int space READ getSpace WRITE setSpace)Q_PROPERTY(bool animation READ getAnimation WRITE setAnimation)Q_PROPERTY(double animationStep READ getAnimationStep WRITE setAnimationStep)Q_PROPERTY(bool showUserValue READ getShowUserValue WRITE setShowUserValue)Q_PROPERTY(double userValue READ getUserValue WRITE setUserValue)Q_PROPERTY(QColor userValueColor READ getUserValueColor WRITE setUserValueColor)Q_PROPERTY(QColor bgColorStart READ getBgColorStart WRITE setBgColorStart)Q_PROPERTY(QColor bgColorEnd READ getBgColorEnd WRITE setBgColorEnd)Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor)Q_PROPERTY(QColor barBgColor READ getBarBgColor WRITE setBarBgColor)Q_PROPERTY(QColor barColor READ getBarColor WRITE setBarColor)Q_PROPERTY(BarPosition barPosition READ getBarPosition WRITE setBarPosition)Q_PROPERTY(TickPosition tickPosition READ getTickPosition WRITE setTickPosition)public:enum BarPosition {BarPosition_Left = 0,       //左侧显示BarPosition_Right = 1,      //右侧显示BarPosition_Center = 2      //居中显示};enum TickPosition {TickPosition_Null = 0,      //不显示TickPosition_Left = 1,      //左侧显示TickPosition_Right = 2,     //右侧显示TickPosition_Both = 3       //两侧显示};explicit RulerTemp(QWidget *parent = 0);~RulerTemp();protected:void resizeEvent(QResizeEvent *);void paintEvent(QPaintEvent *);void drawBg(QPainter *painter);void drawBarBg(QPainter *painter);void drawRuler(QPainter *painter, int type);void drawBar(QPainter *painter);void drawValue(QPainter *painter);private:double minValue;                //最小值double maxValue;                //最大值double value;                   //目标值int precision;                  //精确度,小数点后几位int longStep;                   //长线条等分步长int shortStep;                  //短线条等分步长int space;                      //间距bool animation;                 //是否启用动画显示double animationStep;           //动画显示时步长bool showUserValue;             //显示用户设定值double userValue;               //用户设定值QColor userValueColor;          //用户设定值颜色QColor bgColorStart;            //背景渐变开始颜色QColor bgColorEnd;              //背景渐变结束颜色QColor lineColor;               //线条颜色QColor barBgColor;              //柱状背景色QColor barColor;                //柱状颜色BarPosition barPosition;        //柱状条位置TickPosition tickPosition;      //刻度尺位置int barWidth;                   //水银柱宽度int barHeight;                  //水银柱高度int radius;                     //水银柱底部圆半径int targetX;                    //目标X坐标QRectF barRect;                 //柱状区域QRectF circleRect;              //底部圆区域bool reverse;                   //是否倒退double currentValue;            //当前值QTimer *timer;                  //定时器绘制动画private slots:void updateValue();public:double getMinValue()            const;double getMaxValue()            const;double getValue()               const;int getPrecision()              const;int getLongStep()               const;int getShortStep()              const;int getSpace()                  const;bool getAnimation()             const;double getAnimationStep()       const;bool getShowUserValue()         const;double getUserValue()           const;QColor getUserValueColor()      const;QColor getBgColorStart()        const;QColor getBgColorEnd()          const;QColor getLineColor()           const;QColor getBarBgColor()          const;QColor getBarColor()            const;BarPosition getBarPosition()    const;TickPosition getTickPosition()  const;QSize sizeHint()                const;QSize minimumSizeHint()         const;public Q_SLOTS://设置最大最小值-范围值void setRange(double minValue, double maxValue);void setRange(int minValue, int maxValue);//设置最大最小值void setMinValue(double minValue);void setMaxValue(double maxValue);//设置目标值void setValue(double value);void setValue(int value);//设置精确度void setPrecision(int precision);//设置线条等分步长void setLongStep(int longStep);void setShortStep(int shortStep);//设置间距void setSpace(int space);//设置是否启用动画显示void setAnimation(bool animation);//设置动画显示的步长void setAnimationStep(double animationStep);//设置是否显示用户设定值void setShowUserValue(bool showUserValue);//设置用户值void setUserValue(double userValue);void setUserValue(int userValue);//设置用户设定值颜色void setUserValueColor(const QColor &userValueColor);//设置背景颜色void setBgColorStart(const QColor &bgColorStart);void setBgColorEnd(const QColor &bgColorEnd);//设置线条颜色void setLineColor(const QColor &lineColor);//设置柱状颜色void setBarBgColor(const QColor &barBgColor);void setBarColor(const QColor &barColor);//设置柱状条位置void setBarPosition(const BarPosition &barPosition);//设置刻度尺位置void setTickPosition(const TickPosition &tickPosition);Q_SIGNALS:void valueChanged(double value);
};#endif // RULERTEMP_H

核心代码

void RulerTemp::paintEvent(QPaintEvent *)
{//绘制准备工作,启用反锯齿QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);//绘制背景drawBg(&painter);//绘制标尺及刻度尺if (tickPosition == TickPosition_Left) {drawRuler(&painter, 0);} else if (tickPosition == TickPosition_Right) {drawRuler(&painter, 1);} else if (tickPosition == TickPosition_Both) {drawRuler(&painter, 0);drawRuler(&painter, 1);}//绘制水银柱背景,包含水银柱底部圆drawBarBg(&painter);//绘制当前水银柱,包含水银柱底部圆drawBar(&painter);//绘制当前值drawValue(&painter);
}void RulerTemp::drawBg(QPainter *painter)
{painter->save();painter->setPen(Qt::NoPen);QLinearGradient bgGradient(QPointF(0, 0), QPointF(0, height()));bgGradient.setColorAt(0.0, bgColorStart);bgGradient.setColorAt(1.0, bgColorEnd);painter->setBrush(bgGradient);painter->drawRect(rect());painter->restore();
}void RulerTemp::drawBarBg(QPainter *painter)
{painter->save();painter->setPen(Qt::NoPen);painter->setBrush(barBgColor);int barX = targetX - barWidth / 2;int barY = space;QRectF barRect(barX, barY, barWidth, barHeight);int circleX = targetX - radius;//偏移 2 个像素,使得看起来边缘完整int circleY = height() - radius * 2 - 2;int circleWidth = radius * 2;QRectF circleRect(circleX, circleY, circleWidth, circleWidth);QPainterPath path;path.addRect(barRect);path.addEllipse(circleRect);path.setFillRule(Qt::WindingFill);painter->drawPath(path);painter->restore();
}void RulerTemp::drawRuler(QPainter *painter, int type)
{painter->save();painter->setPen(lineColor);int barPercent = barWidth / 8;if (barPercent < 2) {barPercent = 2;}//绘制纵向标尺刻度double length = height() - 2 * space - 2 * radius;//计算每一格移动多少double increment = length / (maxValue - minValue);//长线条短线条长度int longLineLen = 10;int shortLineLen = 7;//绘制纵向标尺线 偏移 5 像素int offset = barWidth / 2 + 5;//左侧刻度尺需要重新计算if (type == 0) {offset = -offset;longLineLen = -longLineLen;shortLineLen = -shortLineLen;}double initX = targetX + offset;double initY = space + barPercent;QPointF topPot(initX, initY);QPointF bottomPot(initX, height() - 2 * radius - 5);painter->drawLine(topPot, bottomPot);//根据范围值绘制刻度值及刻度值for (int i = maxValue; i >= minValue; i = i - shortStep) {if (i % longStep == 0) {//绘制长线条QPointF leftPot(initX + longLineLen, initY);QPointF rightPot(initX, initY);painter->drawLine(leftPot, rightPot);//绘制文字QString strValue = QString("%1").arg((double)i, 0, 'f', precision);double fontHeight = painter->fontMetrics().height();if (type == 0) {QRect textRect(initX - 45, initY - fontHeight / 3, 30, 15);painter->drawText(textRect, Qt::AlignRight, strValue);} else if (type == 1) {QRect textRect(initX + longLineLen + 5, initY - fontHeight / 3, 30, 15);painter->drawText(textRect, Qt::AlignLeft, strValue);}} else {//绘制短线条QPointF leftPot(initX + shortLineLen, initY);QPointF rightPot(initX, initY);painter->drawLine(leftPot, rightPot);}initY += increment * shortStep;}painter->restore();
}void RulerTemp::drawBar(QPainter *painter)
{painter->save();painter->setPen(Qt::NoPen);painter->setBrush(barColor);//计算在背景宽度的基础上缩小的百分比, 至少为 2int barPercent = barWidth / 8;int circlePercent = radius / 6;if (barPercent < 2) {barPercent = 2;}if (circlePercent < 2) {circlePercent = 2;}//标尺刻度高度double length = height() - 2 * space - 2 * radius;//计算每一格移动多少double increment = length / (maxValue - minValue);//计算标尺的高度int rulerHeight = height() - 1 * space - 2 * radius;int barX = targetX - barWidth / 2;int barY = rulerHeight - (currentValue - minValue) * increment;barRect = QRectF(barX + barPercent, barY + barPercent, barWidth - barPercent * 2, barHeight + radius - barY);int circleX = targetX - radius;//偏移 2 个像素,使得看起来边缘完整int circleY = height() - radius * 2 - 2;int circleWidth = radius * 2 - circlePercent * 2;circleRect = QRectF(circleX + circlePercent, circleY + circlePercent, circleWidth, circleWidth);QPainterPath path;path.addRect(barRect);path.addEllipse(circleRect);path.setFillRule(Qt::WindingFill);painter->drawPath(path);//绘制用户设定值三角号if (showUserValue) {if (tickPosition == TickPosition_Left || tickPosition == TickPosition_Both) {QPolygon pts;int offset = 15;double initX = targetX - (barWidth / 2 + 5);double initY = rulerHeight - (userValue - minValue) * increment;pts.append(QPoint(initX, initY));pts.append(QPoint(initX - offset, initY - offset / 2));pts.append(QPoint(initX - offset, initY + offset / 2));painter->setBrush(userValueColor);painter->drawPolygon(pts);}if (tickPosition == TickPosition_Right || tickPosition == TickPosition_Both) {QPolygon pts;int offset = 15;double initX = targetX + (barWidth / 2 + 5);double initY = rulerHeight - (userValue - minValue) * increment;pts.append(QPoint(initX, initY));pts.append(QPoint(initX + offset, initY - offset / 2));pts.append(QPoint(initX + offset, initY + offset / 2));painter->setBrush(userValueColor);painter->drawPolygon(pts);}}painter->restore();
}void RulerTemp::drawValue(QPainter *painter)
{painter->save();QFont font;font.setPixelSize(circleRect.width() * 0.55);painter->setFont(font);painter->setPen(Qt::white);painter->drawText(circleRect, Qt::AlignCenter, QString("%1").arg(currentValue));painter->restore();
}

控件介绍

  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）。

63094-20190423090259821-1626075914.png
63094-20190423090304907-107322023.png

转载于:https://www.cnblogs.com/feiyangqingyun/p/10754398.html

这篇关于Qt编写自定义控件5-柱状温度计的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/425827。

相关文章

利用Python编写一个简单的聊天机器人

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始，然后逐步加入更复杂的功能。这里我们将先实现一个简单的
阅读更多...
C#实现WinForm控件焦点的获取与失去

C#实现WinForm控件焦点的获取与失去

《C#实现WinForm控件焦点的获取与失去》在一个数据输入表单中,当用户从一个文本框切换到另一个文本框时,需要准确地判断焦点的转移,以便进行数据验证、提示信息显示等操作,本文将探讨Winform控件... 目录前言获取焦点改变TabIndex属性值调用Focus方法失去焦点总结最后前言在一个数据输入表单
阅读更多...
基于Qt Qml实现时间轴组件

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用
阅读更多...
使用PyQt5编写一个简单的取色器

使用PyQt5编写一个简单的取色器

《使用PyQt5编写一个简单的取色器》：本文主要介绍PyQt5搭建的一个取色器,一共写了两款应用,一款使用快捷键捕获鼠标附近图像的RGB和16进制颜色编码,一款跟随鼠标刷新图像的RGB和16... 目录取色器1取色器2PyQt5搭建的一个取色器，一共写了两款应用，一款使用快捷键捕获鼠标附近图像的RGB和16
阅读更多...
基于Qt开发一个简单的OFD阅读器

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要
阅读更多...
SpringBoot 自定义消息转换器使用详解

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
python与QT联合的详细步骤记录

python与QT联合的详细步骤记录

《python与QT联合的详细步骤记录》：本文主要介绍python与QT联合的详细步骤,文章还展示了如何在Python中调用QT的.ui文件来实现GUI界面,并介绍了多窗口的应用,文中通过代码介绍... 目录一、文章简介二、安装pyqt5三、GUI页面设计四、python的使用python文件创建pytho
阅读更多...
QT实现TCP客户端自动连接

QT实现TCP客户端自动连接

《QT实现TCP客户端自动连接》这篇文章主要为大家详细介绍了QT中一个TCP客户端自动连接的测试模型,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录版本 1:没有取消按钮 测试效果测试代码版本 2:有取消按钮测试效果测试代码版本 1:没有取消按钮 测试效果缺陷：无法手动停
阅读更多...
使用Java编写一个文件批量重命名工具

使用Java编写一个文件批量重命名工具

《使用Java编写一个文件批量重命名工具》这篇文章主要为大家详细介绍了如何使用Java编写一个文件批量重命名工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景处理1. 文件夹检查与遍历2. 批量重命名3. 输出配置代码片段完整代码背景在开发移动应用时，UI设计通常会提供不
阅读更多...
基于Qt实现系统主题感知功能

基于Qt实现系统主题感知功能

《基于Qt实现系统主题感知功能》在现代桌面应用程序开发中,系统主题感知是一项重要的功能,它使得应用程序能够根据用户的系统主题设置（如深色模式或浅色模式）自动调整其外观,Qt作为一个跨平台的C++图形用... 目录【正文开始】一、使用效果二、系统主题感知助手类（SystemThemeHelper）三、实现细节
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2