关键词:
前言
环形进度条,用来展示当前进度,为了满足大屏UI的需要特意定制,以前有个叫圆环进度条,不能满足项目需要,只能重新定做,以前的进度间距不能自适应分辨率,而且当前进度对应的反的进度不能单独设置颜色,即当前进度90%,剩余的10%也需要设置成不同的颜色,还有一个重要的功能是,能够指定多个警戒值,一旦超过或者小于该值,则当前进度自动切换到预先设定的警戒值颜色,而不需要用户自己去判断警戒值去设置警戒颜色,用户只需要传入当前值即可,这个功能非常实用,还可以设置警戒判断的标准是超过值还是小于值报警。个人感觉这个环形进度条功能完爆市面上所有的圆环进度条。只要稍作参数设置可以变成各种想要的效果,什么起始角度+动画效果+顺时针逆时针转等。
实现的功能
- 1:可设置范围值,支持负数值
- 2:可设置精确度,最大支持小数点后3位
- 3:可设置起始角度
- 4:可设置三种值+三种颜色,启用自动检测值后绘制不同的颜色
- 5:可设置是否启用动画效果以及动画效果每次移动的步长
- 6:可设置背景颜色/文字颜色/进度颜色/中间圆颜色
- 7:可设置值警戒报警比较模式 0-不比较 1-最大值报警 2-最小值报警
- 8:可设置显示的值是百分比
- 9:可设置圆环与背景之间的距离即间距
- 10:可设置圆环的宽度
- 11:可设置圆环背景颜色,形成两种颜色差
- 12:可设置顺时针逆时针转
- 13:自适应窗体拉伸,刻度尺和文字自动缩放
效果图
头文件代码
#ifndef PROGRESSRING_H
#define PROGRESSRING_H
/**
* 环形进度条控件 作者:feiyangqingyun(QQ:517216493) 2019-5-1
* 1:可设置范围值,支持负数值
* 2:可设置精确度,最大支持小数点后3位
* 3:可设置起始角度
* 4:可设置三种值+三种颜色,启用自动检测值后绘制不同的颜色
* 5:可设置是否启用动画效果以及动画效果每次移动的步长
* 6:可设置背景颜色/文字颜色/进度颜色/中间圆颜色
* 7:可设置值警戒报警比较模式 0-不比较 1-最大值报警 2-最小值报警
* 8:可设置显示的值是百分比
* 9:可设置圆环与背景之间的距离即间距
* 10:可设置圆环的宽度
* 11:可设置圆环背景颜色,形成两种颜色差
* 12:可设置顺时针逆时针转
* 13:自适应窗体拉伸,刻度尺和文字自动缩放
*/
#include <QWidget>
#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif
class QDESIGNER_WIDGET_EXPORT ProgressRing : public QWidget
#else
class ProgressRing : public QWidget
#endif
Q_OBJECT
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(bool showPercent READ getShowPercent WRITE setShowPercent)
Q_PROPERTY(int alarmMode READ getAlarmMode WRITE setAlarmMode)
Q_PROPERTY(int startAngle READ getStartAngle WRITE setStartAngle)
Q_PROPERTY(int ringPadding READ getRingPadding WRITE setRingPadding)
Q_PROPERTY(int ringWidth READ getRingWidth WRITE setRingWidth)
Q_PROPERTY(bool animation READ getAnimation WRITE setAnimation)
Q_PROPERTY(double animationStep READ getAnimationStep WRITE setAnimationStep)
Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
Q_PROPERTY(QColor ringColor READ getRingColor WRITE setRingColor)
Q_PROPERTY(QColor ringBgColor READ getRingBgColor WRITE setRingBgColor)
Q_PROPERTY(QColor circleColor READ getCircleColor WRITE setCircleColor)
Q_PROPERTY(int ringValue1 READ getRingValue1 WRITE setRingValue1)
Q_PROPERTY(int ringValue2 READ getRingValue2 WRITE setRingValue2)
Q_PROPERTY(int ringValue3 READ getRingValue3 WRITE setRingValue3)
Q_PROPERTY(QColor ringColor1 READ getRingColor1 WRITE setRingColor1)
Q_PROPERTY(QColor ringColor2 READ getRingColor2 WRITE setRingColor2)
Q_PROPERTY(QColor ringColor3 READ getRingColor3 WRITE setRingColor3)
public:
explicit ProgressRing(QWidget *parent = 0);
~ProgressRing();
protected:
void paintEvent(QPaintEvent *);
void drawBg(QPainter *painter);
void drawRing(QPainter *painter);
void drawPadding(QPainter *painter);
void drawCircle(QPainter *painter);
void drawValue(QPainter *painter);
private slots:
void updateValue();
private:
double minValue; //最小值
double maxValue; //最大值
double value; //目标值
int precision; //精确度,小数点后几位
bool clockWise; //顺时针逆时针
bool showPercent; //显示百分比
int alarmMode; //警戒报警模式,进度为不同的颜色
int startAngle; //起始角度
int ringPadding; //圆环间距
int ringWidth; //圆环宽度
bool animation; //是否启用动画显示
double animationStep; //动画显示时步长
QColor bgColor; //背景颜色
QColor textColor; //文字颜色
QColor ringColor; //圆环颜色
QColor ringBgColor; //圆环进度背景
QColor circleColor; //中心圆颜色
int ringValue1; //环形值1
int ringValue2; //环形值2
int ringValue3; //环形值3
QColor ringColor1; //环形颜色1
QColor ringColor2; //环形颜色2
QColor ringColor3; //环形颜色3
bool reverse; //是否往回走
double currentValue; //当前值
QTimer *timer; //定时器绘制动画
public:
double getMinValue() const;
double getMaxValue() const;
double getValue() const;
int getPrecision() const;
bool getClockWise() const;
bool getShowPercent() const;
int getAlarmMode() const;
int getStartAngle() const;
int getRingPadding() const;
int getRingWidth() const;
bool getAnimation() const;
double getAnimationStep() const;
QColor getBgColor() const;
QColor getTextColor() const;
QColor getRingColor() const;
QColor getRingBgColor() const;
QColor getCircleColor() const;
int getRingValue1() const;
int getRingValue2() const;
int getRingValue3() const;
QColor getRingColor1() const;
QColor getRingColor2() const;
QColor getRingColor3() 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 setClockWise(bool clockWise);
//设置显示百分比
void setShowPercent(bool showPercent);
//设置启动自动检验
void setAlarmMode(int alarmMode);
//设置起始角度
void setStartAngle(int startAngle);
//设置圆环间距
void setRingPadding(int ringPadding);
//设置圆环宽度
void setRingWidth(int ringWidth);
//设置是否启用动画显示
void setAnimation(bool animation);
//设置动画显示的步长
void setAnimationStep(double animationStep);
//设置背景颜色
void setBgColor(const QColor &bgColor);
//设置文本颜色
void setTextColor(const QColor &textColor);
//设置圆环进度颜色
void setRingColor(const QColor &ringColor);
//设置圆环背景颜色
void setRingBgColor(const QColor &ringBgColor);
//设置中心圆颜色
void setCircleColor(const QColor &circleColor);
//设置三种值
void setRingValue1(int ringValue1);
void setRingValue2(int ringValue2);
void setRingValue3(int ringValue3);
//设置三种颜色
void setRingColor1(const QColor &ringColor1);
void setRingColor2(const QColor &ringColor2);
void setRingColor3(const QColor &ringColor3);
Q_SIGNALS:
void valueChanged(int value);
;
#endif // PROGRESSRING_H
核心代码
void ProgressRing::paintEvent(QPaintEvent *)
int width = this->width();
int height = this->height();
int side = qMin(width, height);
//绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
painter.translate(width / 2, height / 2);
painter.scale(side / 200.0, side / 200.0);
//绘制背景
drawBg(&painter);
//绘制进度
drawRing(&painter);
//绘制间隔,重新绘制一个圆遮住,产生间距效果
if (ringPadding > 0)
drawPadding(&painter);
//绘制中间圆
drawCircle(&painter);
//绘制当前值
drawValue(&painter);
void ProgressRing::drawBg(QPainter *painter)
int radius = 99;
painter->save();
painter->setPen(Qt::NoPen);
//这里有个技巧,如果没有间距则设置成圆环的背景色
painter->setBrush(ringPadding == 0 ? ringBgColor : bgColor);
painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
painter->restore();
void ProgressRing::drawRing(QPainter *painter)
int radius = 99 - ringPadding;
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(ringColor);
QRectF rect(-radius, -radius, radius * 2, radius * 2);
//计算总范围角度,当前值范围角度,剩余值范围角度
double angleAll = 360.0;
double angleCurrent = angleAll * ((currentValue - minValue) / (maxValue - minValue));
double angleOther = angleAll - angleCurrent;
//如果逆时针
if (!clockWise)
angleCurrent = -angleCurrent;
angleOther = -angleOther;
//动态设置当前进度颜色
QColor color = ringColor;
if (alarmMode == 1)
if (currentValue >= ringValue3)
color = ringColor3;
else if (currentValue >= ringValue2)
color = ringColor2;
else
color = ringColor1;
else if (alarmMode == 2)
if (currentValue <= ringValue1)
color = ringColor1;
else if (currentValue <= ringValue2)
color = ringColor2;
else
color = ringColor3;
//绘制当前值饼圆
painter->setBrush(color);
painter->drawPie(rect, (startAngle - angleCurrent) * 16, angleCurrent * 16);
//绘制剩余值饼圆
painter->setBrush(ringBgColor);
painter->drawPie(rect, (startAngle - angleCurrent - angleOther) * 16, angleOther * 16);
painter->restore();
void ProgressRing::drawPadding(QPainter *painter)
int radius = 99 - ringWidth - ringPadding;
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(bgColor);
painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
painter->restore();
void ProgressRing::drawCircle(QPainter *painter)
//文字的区域要减去进度的宽度及间距
int radius = 99 - ringWidth - (ringPadding * 2);
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(circleColor);
painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
painter->restore();
void ProgressRing::drawValue(QPainter *painter)
//文字的区域要减去进度的宽度及间距
int radius = 99 - ringWidth - (ringPadding * 2);
painter->save();
painter->setPen(textColor);
QFont font;
int fontSize = radius - (showPercent ? 20 : 6);
font.setPixelSize(fontSize);
painter->setFont(font);
QRectF textRect(-radius, -radius, radius * 2, radius * 2);
QString strValue;
if (showPercent)
double percent = (currentValue * 100) / (maxValue - minValue);
strValue = QString("%1%").arg(percent, 0, 'f', precision);
else
strValue = QString("%1").arg(currentValue, 0, 'f', precision);
painter->drawText(textRect, Qt::AlignCenter, strValue);
painter->restore();
控件介绍
- 超过145个精美控件,涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏,flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
- 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量。qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。
- 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到Qt5.12的任何Qt版本,支持mingw、msvc、gcc等编译器,不乱码,可直接集成到Qt Creator中,和自带的控件一样使用,大部分效果只要设置几个属性即可,极为方便。
- 每个控件都有一个对应的单独的包含该控件源码的DEMO,方便参考使用。同时还提供一个所有控件使用的集成的DEMO。
- 每个控件的源代码都有详细中文注释,都按照统一设计规范编写,方便学习自定义控件的编写。
- 每个控件默认配色和demo对应的配色都非常精美。
- 超过130个可见控件,6个不可见控件。
- 部分控件提供多种样式风格选择,多种指示器样式选择。
- 所有控件自适应窗体拉伸变化。
- 集成自定义控件属性设计器,支持拖曳设计,所见即所得,支持导入导出xml格式。
- 自带activex控件demo,所有控件可以直接运行在ie浏览器中。
- 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体,享受图形字体带来的乐趣。
- 所有控件最后生成一个dll动态库文件,可以直接集成到qtcreator中拖曳设计使用。
SDK下载
- SDK下载链接:https://pan.baidu.com/s/1tD9v1YPfE2fgYoK6lqUr1Q 提取码:lyhk
- 自定义控件+属性设计器欣赏:https://pan.baidu.com/s/1l6L3rKSiLu_uYi7lnL3ibQ 提取码:tmvl
- 下载链接中包含了各个版本的动态库文件,所有控件的头文件,使用demo。
- 自定义控件插件开放动态库dll使用(永久免费),无任何后门和限制,请放心使用。
- 目前已提供22个版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控件和完善控件,不定期更新SDK,欢迎各位提出建议,谢谢!
- widget版本(QQ:517216493)qml版本(QQ:373955953)三峰驼(QQ:278969898)。
自定义圆环形进度条实现(代码片段)
...一下效果图:功能有:圆环的颜色和进度可以自定义;中间文字可以自定义;可以自定义圆环的宽度;可以设置底部文字(文字内容、大小和textSt 查看详情
自定义圆环形进度条实现(代码片段)
...一下效果图:功能有:圆环的颜色和进度可以自定义;中间文字可以自定义;可以自定义圆环的宽度;可以设置底部文字(文字内容、大小和textStyle);提供设置进度的接口;可以设置进度的最大值&... 查看详情
酷炫进度条自定义seekbar(代码片段)
前些天一同学给了我一个ui图,是这样子的:需求:1、看了ui图可以知道这类似android自带的seekbar控件,2、一个水平进度条和一个圆形进度条;3、圆形进度条显示环形刻度和当前进度值;4、并且圆形进度... 查看详情
android自定义控件篇圆形进度条(代码片段)
一、效果图二、代码逻辑/***funcation:圆形进度条控件*/publicclassCircleProgressViewextendsViewprivatePaintmBackPaint,mProgPaint;//绘制画笔privateRectFmRectF;//绘制区域privateint[]mColorArray;//圆环渐变色privateintmProgress;//圆环进度(0-100)publicCircleProgressView(Co... 查看详情
qt编写自定义控件插件开放动态库dll使用(永久免费)
...想要使用其中一个控件,必须包含所有的代码。全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到Qt5.12的任何Qt版本,支持mingw、msvc、gcc等编译器,不乱码,可直接集成到QtCreator中,和自带的控件一样使用,大部分效果只要设置几个... 查看详情
qt编写自定义控件15-百分比仪表盘(代码片段)
前言百分比仪表盘,主要的应用场景是展示销售完成率、产品合格率等,也可以作为一个进度百分比展示,可以独立设置对应的标题文字,标题文字的颜色和整体的颜色都可以单独设置,建议设置成统一的风格,这样会显得更加... 查看详情
qt编写自定义控件20-自定义饼图(代码片段)
前言上次在写可视化数据大屏电子看板项目的时候,为了逐步移除对QChart的依赖(主要是因为QChart真的太垃圾了,是所有Qt的模块中源码最烂的一个,看过源码的人没有一个不吐槽,不仅不支持10W级别的数据量曲线展示,居然一... 查看详情
qt编写自定义控件25-自定义qcustomplot(代码片段)
一、前言上次在写大屏数据可视化电子看板系统时候,提到过改造QCustomPlot来实现柱状分组图、横向柱状图、横向分组图、鼠标悬停提示等。这次单独列出来描述,有很多人疑问为啥不用QChart,或者echart等形式,其实这两种方式... 查看详情
qt编写自定义控件插件路过的坑及注意事项
在一日一控件的口号下,终于写好了五十几个自定义控件,包括各种仪表盘,各种温度计,各种进度条,各种按钮等,具体可参见(http://www.cnblogs.com/feiyangqingyun/p/6128288.html)目前演示DEMO都是采用提升的方法来显示的,一直有个... 查看详情
qt编写自定义控件24-图片轮播控件(代码片段)
一、前言上一篇文章写的广告轮播控件,采用的传统widget堆积设置样式表做的,这次必须要用到更高级的QPainter来绘制了,这个才是最高效的办法,本控件参考雨田哥的轮播控件,经过大规模的改造而成,相比于原来的广告轮播... 查看详情
qt编写自定义控件:左上角圆形菜单控件(代码片段)
代码:#ifndefROUNDMMENUINUPPERLEFTCORNERWIDGET_H#defineROUNDMMENUINUPPERLEFTCORNERWIDGET_H#include<QWidget>#include<QTimer>#include<QPainterPath>classRoundMmenuInUpperLeftCornerWidget:publicQWidgetQ_OBJECTpublic:RoundMmenuInUpperLeftCornerWidget(QWidget*parent=nullptr);... 查看详情
qt编写自定义控件22-蚂蚁线(代码片段)
一、前言关于蚂蚁线控件,相信很多用过PS的人都知道,在选中某个区域以后,边上的线条会有一种动态流动的效果,这种效果就叫做蚂蚁线,百科的解释是:动物的一种本能现象,领头的蚂蚁以随机的路线走向食物或洞穴,第... 查看详情
qt编写自定义控件23-广告轮播控件(代码片段)
一、前言广告轮播这个控件做的比较早,是很早以前定制一个电信客户端时候用到的,该客户端需要在首页展示轮播预先设定好的图片,图片的路径可以自由设定,然后轮播的间隔速度可以自由控制,同时该控件还需要提供两种... 查看详情
qt编写自定义控件21-圆弧仪表盘(代码片段)
一、前言圆弧仪表盘在整个自定义控件大全中也稍微遇到了技术难点,比如背景透明,如果采用以前画圆形画扇形的方式绘制,肯定很难形成背景透明,需要用到切割,最后换了一种绘制方法,采用绘制圆弧的方式,即使用drawAr... 查看详情
delphi:圆形进度(环形进度)(代码片段)
...遂研究其。最终效果图如下: 实现:制作TCircleProgress控件,实现方法参照系统之TGauge控件,CSDN上tp机器猫一个源码,结合GDI+绘制技术实现。设计控件图标时,Delphi7自带之ImageEditor在之后版本中没了,重装其取出来用。水平... 查看详情
一起talkandroid吧(第四百九十六回:自定义view实例二:环形进度条)
...是"如何使用Java版MQTT客户端",这一回中咱们说的例子是"自定义View实例二:环形进度条"。闲话休提,言归正转,让我们一起TalkAndroid吧!知识回顾看官们,我们又回到了自定义View相关的知识中,在这里对旧知识做一些回顾:首先... 查看详情
qt软件开发之基础控件--2.5.2qprogressbar进度条(代码片段)
2.5.2QProgressBar进度条 QT的QProgressBar类提供了一个水平和垂直样式的进度条。QProgressBar通常用来给用户显示一个操作的进度。比如:安装软件时显示的进度条、安装系统的进度条等等。 进度条使用步骤:可以设置它的... 查看详情
仿字节颜色自定义android进度条(代码片段)
效果展示代码实现第一步:编写自定义属性 res/values/attrs.xml<?xmlversion="1.0"encoding="utf-8"?><resources><declare-styleablename="MyLoadingView"><attrname="loading_color_one"format="color"/> 查看详情