发帖 回复
返回列表
  • 4104阅读
  • 0回复

Qt编写自定义控件59-直方动态图 [复制链接]

 上一主题 下一主题
离线liudianwu
总版主
 
只看楼主 倒序阅读 楼主  发表于: 2019-09-24
一、前言
直方动态图类似于音乐播放时候的柱状图展示，顶部提供一个横线条，当柱状上升的时候，该线条类似于帽子的形式冲到顶端，相当于柱状顶上去的感觉，给人一种动态的感觉，听音乐的同时更加赏心悦目，原理比较简单，就是用2个定时器，一个定时器间隔比较短，负责快速把柱状图从底部冲到设置的值，同时横线条跟随一起冲上去，一个定时器负责慢慢的跌落值到0，然后横线条缓慢下降，下降速度比柱状图的速度要慢一些，产生一种对比的效果，看起来更像是跌落的感觉。

二、实现的功能
* 1:可设置最大值/最小值/当前值
* 2:可设置顶部滑块高度
* 3:可设置每次变动的步长
* 4:可设置item之间的间隔
* 5:可设置渐变的背景颜色
* 6:可设置柱状条颜色


三、效果图



四、头文件代码
复制代码
  1. #ifndef WAVEBAR_H
  2. #define WAVEBAR_H
  4. /**
  5. * 直方动态图控件 作者:feiyangqingyun(QQ:517216493) 2016-11-6
  6. * 1:可设置最大值/最小值/当前值
  7. * 2:可设置顶部滑块高度
  8. * 3:可设置每次变动的步长
  9. * 4:可设置item之间的间隔
  10. * 5:可设置渐变的背景颜色
  11. * 6:可设置柱状条颜色
  12. */
  14. #include <QWidget>
  16. #ifdef quc
  17. #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
  18. #include <QtDesigner/QDesignerExportWidget>
  19. #else
  20. #include <QtUiPlugin/QDesignerExportWidget>
  21. #endif
  23. class QDESIGNER_WIDGET_EXPORT WaveBar : public QWidget
  24. #else
  25. class WaveBar : public QWidget
  26. #endif
  28. {
  29.     Q_OBJECT    
  30.     Q_PROPERTY(int minValue READ getMinValue WRITE setMinValue)
  31.     Q_PROPERTY(int maxValue READ getMaxValue WRITE setMaxValue)
  32.     Q_PROPERTY(int value READ getValue WRITE setValue)
  34.     Q_PROPERTY(double step READ getStep WRITE setStep)
  35.     Q_PROPERTY(int space READ getSpace WRITE setSpace)
  36.     Q_PROPERTY(int headHeight READ getHeadHeight WRITE setHeadHeight)
  38.     Q_PROPERTY(QColor bgColorStart READ getBgColorStart WRITE setBgColorStart)
  39.     Q_PROPERTY(QColor bgColorEnd READ getBgColorEnd WRITE setBgColorEnd)
  40.     Q_PROPERTY(QColor barColor READ getBarColor WRITE setBarColor)
  42. public:
  43.     explicit WaveBar(QWidget *parent = 0);
  44.     ~WaveBar();
  46. protected:
  47.     void resizeEvent(QResizeEvent *);
  48.     void paintEvent(QPaintEvent *);
  49.     void drawBg(QPainter *painter);
  50.     void drawBar(QPainter *painter);
  51.     void drawHead(QPainter *painter);
  53. private:    
  54.     int minValue;                   //最小值
  55.     int maxValue;                   //最大值
  56.     int value;                      //目标值
  58.     double step;                    //步长
  59.     int space;                      //间距
  60.     int headHeight;                 //顶部条块高度
  62.     QColor bgColorStart;            //背景渐变开始颜色
  63.     QColor bgColorEnd;              //背景渐变结束颜色
  64.     QColor barColor;                //柱状条颜色
  66.     int currentValue;               //当前值
  67.     double headY;                   //顶部条块Y轴坐标
  68.     double barY;                    //柱状条块Y轴坐标
  69.     QTimer *barTimer;               //柱状条块下降定时器
  70.     QTimer *headTimer;              //顶部条块下坠定时器
  72. private slots:
  73.     void updateBar();
  74.     void updateHead();
  76. public:    
  77.     int getMinValue()               const;
  78.     int getMaxValue()               const;
  79.     int getValue()                  const;
  81.     double getStep()                const;
  82.     int getSpace()                  const;
  83.     int getHeadHeight()             const;
  85.     QColor getBgColorStart()        const;
  86.     QColor getBgColorEnd()          const;
  87.     QColor getBarColor()            const;
  89.     QSize sizeHint()                const;
  90.     QSize minimumSizeHint()         const;
  92. public Q_SLOTS:
  93.     //设置范围值
  94.     void setRange(int minValue, int maxValue);
  96.     //设置最大最小值
  97.     void setMinValue(int minValue);
  98.     void setMaxValue(int maxValue);
  100.     //设置目标值
  101.     void setValue(int value);
  103.     //设置步长
  104.     void setStep(double step);
  105.     //设置间距
  106.     void setSpace(int space);
  107.     //设置顶部条块高度
  108.     void setHeadHeight(int headHeight);
  110.     //设置背景颜色
  111.     void setBgColorStart(const QColor &bgColorStart);
  112.     void setBgColorEnd(const QColor &bgColorEnd);
  114.     //设置柱状条颜色
  115.     void setBarColor(const QColor &barColor);
  116. };
  118. #endif // WAVEBAR_H

五、核心代码
复制代码
  1. void WaveBar::paintEvent(QPaintEvent *)
  2. {
  3.     //绘制准备工作,启用反锯齿
  4.     QPainter painter(this);
  5.     painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
  7.     //绘制渐变背景
  8.     drawBg(&painter);
  9.     //绘制柱状条块
  10.     drawBar(&painter);
  11.     //绘制顶部条块
  12.     drawHead(&painter);
  13. }
  15. void WaveBar::drawBg(QPainter *painter)
  16. {
  17.     painter->save();
  18.     painter->setPen(Qt::NoPen);
  19.     QLinearGradient bgGradient(QPointF(0, 0), QPointF(0, height()));
  20.     bgGradient.setColorAt(0.0, bgColorStart);
  21.     bgGradient.setColorAt(1.0, bgColorEnd);
  22.     painter->setBrush(bgGradient);
  23.     painter->drawRect(rect());
  24.     painter->restore();
  25. }
  27. void WaveBar::drawBar(QPainter *painter)
  28. {
  29.     painter->save();
  30.     QRectF barRect(QPointF(space, barY), QPointF(width() - space, height() - space));
  31.     painter->setPen(Qt::NoPen);
  32.     painter->setBrush(barColor);
  33.     painter->drawRect(barRect);
  34.     painter->restore();
  35. }
  37. void WaveBar::drawHead(QPainter *painter)
  38. {
  39.     painter->save();
  40.     QRectF headRect(QPointF(space, headY), QPointF(width() - space, headY - headHeight));
  41.     painter->setPen(Qt::NoPen);
  42.     painter->setBrush(barColor);
  43.     painter->drawRect(headRect);
  44.     painter->restore();
  45. }
  47. void WaveBar::updateBar()
  48. {
  49.     barY += step;
  51.     //超过底部则停止
  52.     int bottomY = height() - space - headHeight;
  54.     if (barY >= bottomY) {
  55.         if (barTimer->isActive()) {
  56.             barTimer->stop();
  57.         }
  59.         barY = bottomY;
  60.     }
  62.     this->update();
  63. }
  65. void WaveBar::updateHead()
  66. {
  67.     headY += step;
  69.     //超过底部则停止
  70.     int bottomY = height() - space;
  72.     if (headY >= bottomY) {
  73.         if (headTimer->isActive()) {
  74.             headTimer->stop();
  75.         }
  77.         headY = bottomY;
  78.     }
  80.     this->update();
  81. }
欢迎关注微信公众号：Qt实战/Qt入门和进阶(各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发) QQ：517216493  WX：feiyangqingyun  QQ群：751439350
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个