![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiYWan5iMlNTZ2UzMzQTN2kTYwMDO3I2NyMWNlVDN5ITZyQzYk9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.gif)
一、前言
本控件也非原創控件,是參考網上的代碼而來的,對稱顧名思義就是将畫布平均成上下兩部分,将設定的值自動按照畫布高度的一半作為參照高度進行繪制,然後增加動态過渡效果,有點類似于聲音播放時候的頻譜效果,一般都會用多個直方對稱圖組合成一個控件來實作多個效果,看起來會更美觀,背景顔色可以設定成漸變的,柱狀條的顔色也可以自行設定。
二、實作的功能
- 1:可設定最大值/最小值/目前值
- 2:可設定每次過渡的步長
- 3:可設定item之間的間隔
- 4:可設定漸變的背景顔色
- 5:可設定柱狀條的顔色
三、效果圖
四、頭檔案代碼
#ifndef WAVEDOUBLE_H
#define WAVEDOUBLE_H
/**
* 直方對稱圖控件 作者:feiyangqingyun(QQ:517216493) 2016-11-6
* 1:可設定最大值/最小值/目前值
* 2:可設定每次過渡的步長
* 3:可設定item之間的間隔
* 4:可設定漸變的背景顔色
* 5:可設定柱狀條的顔色
*/
#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 WaveDouble : public QWidget
#else
class WaveDouble : public QWidget
#endif
{
Q_OBJECT
Q_PROPERTY(int minValue READ getMinValue WRITE setMinValue)
Q_PROPERTY(int maxValue READ getMaxValue WRITE setMaxValue)
Q_PROPERTY(int value READ getValue WRITE setValue)
Q_PROPERTY(double step READ getStep WRITE setStep)
Q_PROPERTY(int space READ getSpace WRITE setSpace)
Q_PROPERTY(QColor bgColorStart READ getBgColorStart WRITE setBgColorStart)
Q_PROPERTY(QColor bgColorEnd READ getBgColorEnd WRITE setBgColorEnd)
Q_PROPERTY(QColor barColor READ getBarColor WRITE setBarColor)
public:
explicit WaveDouble(QWidget *parent = 0);
~WaveDouble();
protected:
void paintEvent(QPaintEvent *);
void drawBg(QPainter *painter);
void drawBar(QPainter *painter);
private:
int minValue; //最小值
int maxValue; //最大值
int value; //目标值
int step; //步長
int space; //間距
QColor bgColorStart; //背景漸變開始顔色
QColor bgColorEnd; //背景漸變結束顔色
QColor barColor; //柱狀條顔色
double currentValue; //目前值
bool reverse; //是否倒退
QTimer *timer; //繪制定時器
private slots:
void updateValue();
void stop();
public:
int getMinValue() const;
int getMaxValue() const;
int getValue() const;
int getStep() const;
int getSpace() const;
QColor getBgColorStart() const;
QColor getBgColorEnd() const;
QColor getBarColor() const;
QSize sizeHint() const;
QSize minimumSizeHint() const;
public Q_SLOTS:
//設定範圍值
void setRange(int minValue, int maxValue);
//設定最大最小值
void setMinValue(int minValue);
void setMaxValue(int maxValue);
//設定目标值
void setValue(int value);
//設定步長
void setStep(int step);
//設定間距
void setSpace(int space);
//設定背景顔色
void setBgColorStart(const QColor &bgColorStart);
void setBgColorEnd(const QColor &bgColorEnd);
//設定柱狀條顔色
void setBarColor(const QColor &barColor);
Q_SIGNALS:
void valueChanged(int value);
};
#endif // WAVEDOUBLE_H
五、核心代碼
void WaveDouble::paintEvent(QPaintEvent *)
{
//繪制準備工作,啟用反鋸齒
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
//繪制漸變背景
drawBg(&painter);
//繪制柱狀條塊
drawBar(&painter);
}
void WaveDouble::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 WaveDouble::drawBar(QPainter *painter)
{
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(barColor);
//找到中心點Y軸坐标
double centerY = (double) height() / 2;
//每一格遞增量
double increment = (double)(height() - 2 * space) / (maxValue - minValue);
//找到目前值的起始和結束Y軸坐标 上下兩半是以 /2
double startY = centerY - (currentValue / 2) * increment;
double endY = centerY + (currentValue / 2) * increment;
QRectF barRect(QPointF(space, startY), QPointF(width() - space, endY));
painter->drawRect(barRect);
painter->restore();
}
六、控件介紹
- 超過150個精美控件,涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、标尺、溫度計、導覽列、導航欄,flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt內建的控件數量。
- 每個類都可以獨立成一個單獨的控件,零耦合,每個控件一個頭檔案和一個實作檔案,不依賴其他檔案,友善單個控件以源碼形式內建到項目中,較少代碼量。qwt的控件類環環相扣,高度耦合,想要使用其中一個控件,必須包含所有的代碼。
- 全部純Qt編寫,QWidget+QPainter繪制,支援Qt4.6到Qt5.13的任何Qt版本,支援mingw、msvc、gcc等編譯器,支援任意作業系統比如windows+linux+mac+嵌入式linux等,不亂碼,可直接內建到Qt Creator中,和自帶的控件一樣使用,大部分效果隻要設定幾個屬性即可,極為友善。
- 每個控件都有一個對應的單獨的包含該控件源碼的DEMO,友善參考使用。同時還提供一個所有控件使用的內建的DEMO。
- 每個控件的源代碼都有詳細中文注釋,都按照統一設計規範編寫,友善學習自定義控件的編寫。
- 每個控件預設配色和demo對應的配色都非常精美。
- 超過130個可見控件,6個不可見控件。
- 部分控件提供多種樣式風格選擇,多種訓示器樣式選擇。
- 所有控件自适應窗體拉伸變化。
- 內建自定義控件屬性設計器,支援拖曳設計,所見即所得,支援導入導出xml格式。
- 自帶activex控件demo,所有控件可以直接運作在ie浏覽器中。
- 內建fontawesome圖形字型+阿裡巴巴iconfont收藏的幾百個圖形字型,享受圖形字型帶來的樂趣。
- 所有控件最後生成一個動态庫檔案(dll或者so等),可以直接內建到qtcreator中拖曳設計使用。
- 目前已經有qml版本,後期會考慮出pyqt版本,如果使用者需求量很大的話。
- 自定義控件插件開放動态庫使用(永久免費),無任何後門和限制,請放心使用。
- 目前已提供26個版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控件和完善控件,不定期更新SDK,歡迎各位提出建議,謝謝!
- Qt入門書籍推薦霍亞飛的《Qt Creator快速入門》《Qt5程式設計入門》,Qt進階書籍推薦官方的《C++ GUI Qt4程式設計》。
- 強烈推薦程式員自我修養和規劃系列書《大話程式員》《程式員的成長課》《解憂程式員》,受益匪淺,受益終生!
- SDK下載下傳連結:https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取碼:877p