Qt編寫自定義控制元件15-百分比儀表盤
前言
百分比儀表盤,主要的應用場景是展示銷售完成率、產品合格率等,也可以作為一個進度百分比展示,可以獨立設定對應的標題文字,標題文字的顏色和整體的顏色都可以單獨設定,建議設定成統一的風格,這樣會顯得更加美觀,貼一張星空圖作為背景就更美觀,本控制元件也是作為大屏UI介面的一個子控制元件,用來展示產品的合格率。
實現的功能
- 1:可設定範圍值,支援負數值
- 2:可設定精確度,最大支援小數點後3位
- 3:可設定大刻度數量/小刻度數量
- 4:可設定開始旋轉角度/結束旋轉角度
- 5:可設定儀表盤的標題
- 6:可設定外圓背景/內圓背景/餅圓三種顏色/刻度尺顏色/文字顏色
- 7:自適應窗體拉伸,刻度尺和文字自動縮放
- 8:可自由拓展各種漸變色,各圓的半徑
效果圖
標頭檔案程式碼
#ifndef GAUGEPERCENT_H #define GAUGEPERCENT_H /** * 百分比儀表盤控制元件 作者:feiyangqingyun(QQ:517216493) 2018-8-30 * 1:可設定範圍值,支援負數值 * 2:可設定精確度,最大支援小數點後3位 * 3:可設定大刻度數量/小刻度數量 * 4:可設定開始旋轉角度/結束旋轉角度 * 5:可設定儀表盤的標題 * 6:可設定外圓背景/內圓背景/餅圓三種顏色/刻度尺顏色/文字顏色 * 7:自適應窗體拉伸,刻度尺和文字自動縮放 * 8:可自由拓展各種漸變色,各圓的半徑 */ #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 GaugePercent : public QWidget #else class GaugePercent : 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(int scaleMajor READ getScaleMajor WRITE setScaleMajor) Q_PROPERTY(int scaleMinor READ getScaleMinor WRITE setScaleMinor) Q_PROPERTY(int startAngle READ getStartAngle WRITE setStartAngle) Q_PROPERTY(int endAngle READ getEndAngle WRITE setEndAngle) Q_PROPERTY(QColor arcColor READ getArcColor WRITE setArcColor) Q_PROPERTY(QColor scaleColor READ getScaleColor WRITE setScaleColor) Q_PROPERTY(QColor scaleNumColor READ getScaleNumColor WRITE setScaleNumColor) Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor) Q_PROPERTY(QColor titleColor READ getTitleColor WRITE setTitleColor) Q_PROPERTY(QColor baseColor READ getBaseColor WRITE setBaseColor) Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor) Q_PROPERTY(QString title READ getTitle WRITE setTitle) public: explicit GaugePercent(QWidget *parent = 0); ~GaugePercent(); protected: void paintEvent(QPaintEvent *); void drawArc(QPainter *painter); void drawCircle(QPainter *painter); void drawScale(QPainter *painter); void drawScaleNum(QPainter *painter); void drawValue(QPainter *painter); void drawTitle(QPainter *painter); private: double minValue; //最小值 double maxValue; //最大值 double value; //目標值 int precision; //精確度,小數點後幾位 int scaleMajor; //大刻度數量 int scaleMinor; //小刻度數量 int startAngle; //開始旋轉角度 int endAngle; //結束旋轉角度 QColor arcColor; //圓弧顏色 QColor scaleColor; //刻度尺顏色 QColor scaleNumColor; //刻度值顏色 QColor textColor; //文字顏色 QColor titleColor; //標題顏色 QColor baseColor; //基準顏色 QColor bgColor; //背景顏色 QString title; //標題 public: double getMinValue() const; double getMaxValue() const; double getValue() const; int getPrecision() const; int getScaleMajor() const; int getScaleMinor() const; int getStartAngle() const; int getEndAngle() const; QColor getArcColor() const; QColor getScaleColor() const; QColor getScaleNumColor() const; QColor getTextColor() const; QColor getTitleColor() const; QColor getBaseColor() const; QColor getBgColor() const; QString getTitle() 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 setScaleMajor(int scaleMajor); //設定小刻度數量 void setScaleMinor(int scaleMinor); //設定開始旋轉角度 void setStartAngle(int startAngle); //設定結束旋轉角度 void setEndAngle(int endAngle); //設定圓弧顏色 void setArcColor(const QColor &arcColor); //設定刻度尺顏色 void setScaleColor(const QColor &scaleColor); //設定刻度值顏色 void setScaleNumColor(const QColor &scaleNumColor); //設定文字顏色 void setTextColor(const QColor &textColor); //設定標題顏色 void setTitleColor(const QColor &titleColor); //設定基準顏色 void setBaseColor(const QColor &baseColor); //設定背景顏色 void setBgColor(const QColor &bgColor); //設定標題 void setTitle(const QString &title); Q_SIGNALS: void valueChanged(int value); }; #endif // GAUGEPERCENT_H
核心程式碼
void GaugePercent::paintEvent(QPaintEvent *) { int width = this->width(); int height = this->height(); int side = qMin(width, height); //繪製準備工作,啟用反鋸齒,平移座標軸中心,等比例縮放 QPainter painter(this); painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing); //繪製背景 if (bgColor != Qt::transparent) { painter.setPen(Qt::NoPen); painter.fillRect(this->rect(), bgColor); } painter.translate(width / 2, height / 2); painter.scale(side / 200.0, side / 200.0); //繪製圓弧 drawArc(&painter); //繪製圓弧進度小球 drawCircle(&painter); //繪製刻度線 drawScale(&painter); //繪製刻度值 drawScaleNum(&painter); //繪製當前值 drawValue(&painter); //繪製標題 drawTitle(&painter); } void GaugePercent::drawArc(QPainter *painter) { int radius = 95; painter->save(); painter->setBrush(Qt::NoBrush); QPen pen; pen.setWidthF(5); pen.setCapStyle(Qt::RoundCap); //計算總範圍角度,當前值範圍角度,剩餘值範圍角度 double angleAll = 360.0 - startAngle - endAngle; double angleCurrent = angleAll * ((value - minValue) / (maxValue - minValue)); double angleOther = angleAll - angleCurrent; QRectF rect = QRectF(-radius, -radius, radius * 2, radius * 2); //繪製當前進度圓弧 pen.setColor(arcColor); painter->setPen(pen); painter->drawArc(rect, (270 - startAngle - angleCurrent) * 16, angleCurrent * 16); //繪製剩餘進度圓弧 pen.setColor(scaleColor); painter->setPen(pen); painter->drawArc(rect, (270 - startAngle - angleCurrent - angleOther) * 16, angleOther * 16); painter->restore(); } void GaugePercent::drawCircle(QPainter *painter) { int radius = 6; int offset = 83; painter->save(); painter->setPen(Qt::NoPen); painter->setBrush(arcColor); painter->rotate(startAngle); double degRotate = (360.0 - startAngle - endAngle) / (maxValue - minValue) * (value - minValue); painter->rotate(degRotate); painter->drawEllipse(-radius, radius + offset, radius * 2, radius * 2); painter->restore(); } void GaugePercent::drawScale(QPainter *painter) { int radius = 90; painter->save(); painter->rotate(startAngle); int steps = (scaleMajor * scaleMinor); double angleStep = (360.0 - startAngle - endAngle) / steps; QPen pen; pen.setColor(scaleColor); pen.setCapStyle(Qt::RoundCap); pen.setWidthF(1.0); painter->setPen(pen); for (int i = 0; i <= steps; i++) { painter->drawLine(0, radius - 5, 0, radius); painter->rotate(angleStep); } painter->restore(); } void GaugePercent::drawScaleNum(QPainter *painter) { int radius = 75; painter->save(); painter->setPen(scaleNumColor); double startRad = (360 - startAngle - 90) * (M_PI / 180); double deltaRad = (360 - startAngle - endAngle) * (M_PI / 180) / scaleMajor; for (int i = 0; i <= scaleMajor; i++) { double sina = qSin(startRad - i * deltaRad); double cosa = qCos(startRad - i * deltaRad); double value = 1.0 * i * ((maxValue - minValue) / scaleMajor) + minValue; QString strValue = QString("%1").arg((double)value, 0, 'f', precision); double textWidth = fontMetrics().width(strValue); double textHeight = fontMetrics().height(); int x = radius * cosa - textWidth / 2; int y = -radius * sina + textHeight / 4; painter->drawText(x, y, strValue); } painter->restore(); } void GaugePercent::drawValue(QPainter *painter) { int radius = 100; painter->save(); painter->setPen(textColor); QFont font; font.setPixelSize(30); painter->setFont(font); QRectF textRect(-radius, 0, radius * 2, radius / 3); QString strValue = QString("%1%").arg((double)value, 0, 'f', precision); painter->drawText(textRect, Qt::AlignCenter, strValue); painter->restore(); } void GaugePercent::drawTitle(QPainter *painter) { int radius = 100; painter->save(); painter->setPen(titleColor); QFont font; font.setPixelSize(20); painter->setFont(font); QRectF textRect(-radius, radius / 3, radius * 2, radius / 3); painter->drawText(textRect, Qt::AlignCenter, title); 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)。
相關推薦
Qt編寫自定義控制元件15-百分比儀表盤
前言 百分比儀表盤,主要的應用場景是展示銷售完成率、產品合格率等,也可以作為一個進度百分比展示,可以獨立設定對應的標題文字,標題文
Qt編寫自定義控制元件1-汽車儀表盤
前言 汽車儀表盤幾乎是qt寫儀表盤控制元件中最常見的,一般來說先要求美工做好設計圖,然後設計效果圖給到程式設計師,由程式設計師根據
Qt編寫自定義控制元件6-指南針儀表盤
前言 指南針儀表盤,主要用來指示東南西北四個方位,雙向對稱兩個指標旋轉,其實就是360度打轉,功能屬於簡單型,可能指標的繪製稍微難
Qt編寫自定義控制元件12-進度儀表盤
前言 進度儀表盤主要應用場景是標識一個任務進度完成的狀況等,可以自由的設定範圍值和當前值,為了美觀還提供了四種指示器(圓形指示器/
Qt編寫自定義控制元件31-面板儀表盤控制元件
一、前言 在Qt自定義控制元件中,儀表盤控制元件是數量最多的,寫儀表盤都寫到快要吐血,可能是因為各種工業控制領域用的比較多吧,而且
Qt編寫自定義控制元件屬性設計器
以前做.NET開發中,.NET直接就集成了屬性設計器,VS不愧是宇宙第一IDE,你能夠想到的都給你封裝好了,用起來不要太爽!因為專案需要自從全面轉Qt開發已經6年有餘,在工業控制領域,有一些應用場景需要自定義繪製一些控制元件滿足特定的需求,比如儀器儀表、組態等,而且需要直接使用者通過屬性設計的形式生成匯出控制
Qt編寫自定義控制元件一開關按鈕
從2010年進入網際網路+智慧手機時代以來,各種各樣的APP大行其道,手機上面的APP有很多流行的元素,開關按鈕個人非常喜歡,手機QQ、360衛士、金山毒霸等,都有很多開關控制一些操作,在Qt widgets應用專案上,在專案中應用些類似的開關按鈕,估計也會為專案增添不少新鮮
Qt編寫自定義控制元件外掛開放動態庫dll使用(永久免費)
這套控制元件陸陸續續完善了四年多,目前共133個控制元件,除了十幾個控制元件參考網友開源的程式碼寫的,其餘全部原創,在釋出之初就有
Qt編寫自定義控制元件2-進度條標尺
前言 進度條標尺控制元件的應用場景一般是需要手動拉動進度,上面有標尺可以看到當前進度,類似於qslider控制元件,其實就是qsl
Qt編寫自定義控制元件7-自定義可拖動多邊形
前言 自定義可拖動多邊形控制元件,原創作者是趙彥博(QQ:408815041 [email protected]),創作之初主要
Qt編寫自定義控制元件9-導航按鈕控制元件
前言 導航按鈕控制元件,主要用於各種漂亮精美的導航條,我們經常在web中看到導航條都非常精美,都是html+css+js實現的,還
Qt編寫自定義控制元件11-裝置防區按鈕控制元件
前言 在很多專案應用中,需要根據資料動態生成物件顯示在地圖上,比如地圖標註,同時還需要可拖動物件到指定位置顯示,能有多種狀態指示,
Qt編寫自定義控制元件13-多型進度條
前言 多型進度條,顧名思義,有多重狀態,其實本控制元件主要是用來表示百分比進度的,由於之前已經存在了百分比進度條控制元件,名字被霸
Qt編寫自定義控制元件14-環形進度條
前言 環形進度條,用來展示當前進度,為了滿足大屏UI的需要特意定製,以前有個叫圓環進度條,不能滿足專案需要,只能重新定做,以前的進
Qt編寫自定義控制元件16-魔法老鼠
前言 五一期間一直忙著大屏電子看板軟體的開發,沒有再去整理控制元件,今天已經將大屏電子看板的所有子視窗都實現了任意停靠和雙擊獨立再
Qt編寫自定義控制元件18-魔法小魚
前言 上次發了個純painter繪製的老鼠,那個就是qt目錄下的demo,改的,只是比demo中的老鼠稍微胖一點,估計人到中年都發
Qt編寫自定義控制元件19-圖片背景時鐘
前言 圖片背景時鐘控制元件,是全套控制元件(目前共145個)中唯一的幾個貼圖的控制元件,這個背景要是不貼圖,會畫到猝死,必須用美工
Qt編寫自定義控制元件20-自定義餅圖
一、前言 上次在寫視覺化資料大屏電子看板專案的時候,為了逐步移除對QChart的依賴(主要是因為QChart真的太垃圾了,是所有Q
Qt編寫自定義控制元件28-顏色滑塊面板
一、前言 相比於上一個顏色按鈕面板,此控制元件就要難很多,顏色值有三種表示形式,除了程式設計師最常用的RGB以外,還有HSB和CM
Qt編寫自定義控制元件29-顏色選取面板
一、前言 這個控制元件主要是模仿QColorDialog對話方塊中的顏色選取面板,提供一個十字形狀的標識器,滑鼠按下開始選取顏色,