Qt編寫自定義控件41-自定義環形圖

本文轉載自查看原文 2019-08-04 17:48 543

一、前言

自定義環形圖控件類似於自定義餅狀圖控件，也是提供一個餅圖區域展示占比，其實核心都是根據自動計算到的百分比繪制餅圖區域。當前環形圖控件模仿的是echart中的環形圖控件，提供雙層環形圖，有一層外圈的環形圖，還有一層里邊的餅狀圖，相當於一個控件就可以表示兩種類型的占比，這樣涵蓋的信息量更大，而且提供了鼠標移上去自動突出顯示的功能，下面的圖例也跟着加粗高亮顯示，非常直觀，類似的控件在很多web項目中大量運用。
本控件的難點並不是繪制環形或者餅圖區域，初學者都會，難點在如何自動精准計算鼠標所在區域，然后高亮突出顯示，用的是QPainterPath的contains方法判斷當前鼠標在哪個區域，需要在繪制的時候記住該餅圖區域的QPainterPath，然后在mouseMoveEvent中判斷，需要開啟鼠標捕捉。控件原作者雨田哥（https://blog.csdn.net/ly305750665）

二、實現的功能

1:可設置是否顯示標題+標題文字+標題高度+標題字號
2:可設置是否顯示圖例+圖例高度+圖例字號
3:可設置背景顏色+文字顏色+高亮顏色+標識顏色
4:可設置外圓顏色+中間圓顏色+內圓顏色
5:可設置外圓數據集合+內圓數據集合
6:鼠標懸停突出顯示區域並高亮顯示文字
7:每個區域都可設置對應的顏色+文字描述+百分比
8:支持直接字符串設置文字集合和百分比集合

三、效果圖

四、頭文件代碼

#ifndef CUSTOMRING_H
#define CUSTOMRING_H

/**
 * 自定義環形圖控件 整理:feiyangqingyun(QQ:517216493) 2019-7-28
 * 原作者:雨田哥(QQ:3246214072)
 * 1:可設置是否顯示標題+標題文字+標題高度+標題字號
 * 2:可設置是否顯示圖例+圖例高度+圖例字號
 * 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 CustomRing : public QWidget
#else
class CustomRing : public QWidget
#endif

{
    Q_OBJECT
    Q_PROPERTY(bool showTitle READ getShowTitle WRITE setShowTitle)
    Q_PROPERTY(int titleHeight READ getTitleHeight WRITE setTitleHeight)
    Q_PROPERTY(int titleFontSize READ getTitleFontSize WRITE setTitleFontSize)
    Q_PROPERTY(QString title READ getTitle WRITE setTitle)

    Q_PROPERTY(bool showLegend READ getShowLegend WRITE setShowLegend)
    Q_PROPERTY(int legendHeight READ getLegendHeight WRITE setLegendHeight)
    Q_PROPERTY(int legendFontSize READ getLegendFontSize WRITE setLegendFontSize)

    Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
    Q_PROPERTY(QColor highColor READ getHighColor WRITE setHighColor)
    Q_PROPERTY(QColor flagColor READ getFlagColor WRITE setFlagColor)

    Q_PROPERTY(QColor outCircleColor READ getOutCircleColor WRITE setOutCircleColor)
    Q_PROPERTY(QColor midCircleColor READ getMidCircleColor WRITE setMidCircleColor)
    Q_PROPERTY(QColor inCircleColor READ getInCircleColor WRITE setInCircleColor)

    Q_PROPERTY(QString outPieInfos READ getOutPieInfos WRITE setOutPieInfos)
    Q_PROPERTY(QString inPieInfos READ getInPieInfos WRITE setInPieInfos)

public:
    struct RingData {
        int offset;         //鼠標移上去往外邊突出顯示的偏移距離
        int percent;        //百分比
        QColor color;       //背景色
        QString text;       //文本
        QPainterPath path;  //區域路徑

        RingData()
        {
            offset = 0;
            percent = 0;
            color = QColor(0, 192, 133);
            text = "";
        }
    };

    CustomRing(QWidget *parent = 0);
    ~CustomRing();

protected:
    void mouseMoveEvent(QMouseEvent *event);
    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawOutCircle(QPainter *painter);
    void drawOutPie(QPainter *painter, qreal scale, QPoint center);
    void drawMidCircle(QPainter *painter);
    void drawInPie(QPainter *painter, qreal scale, QPoint center);
    void drawInCircle(QPainter *painter);
    void drawTitle(QPainter *painter);
    void drawLegendText(QPainter *painter, qreal scale);

private:
    bool showTitle;             //顯示標題
    int titleHeight;            //標題高度
    int titleFontSize;          //標題字號
    QString title;              //標題

    bool showLegend;            //顯示圖例
    int legendHeight;           //圖例高度
    int legendFontSize;         //圖例字號

    QColor bgColor;             //背景顏色
    QColor textColor;           //文字顏色
    QColor highColor;           //高亮顏色
    QColor flagColor;           //標題左側標識顏色

    QColor outCircleColor;      //外圓顏色
    QColor midCircleColor;      //中間圓顏色
    QColor inCircleColor;       //里邊圓顏色

    QString outPieInfos;        //外邊餅圖數據
    QString inPieInfos;         //里邊餅圖數據
    QList<QColor> outPieColors; //餅圖顏色集合,在設置字符串時候用
    QList<QColor> inPieColors;  //餅圖顏色集合,在設置字符串時候用

    QList<RingData> outPieInfo; //外邊餅圖數據
    QList<RingData> inPieInfo;  //里邊餅圖數據

public:
    bool getShowTitle()         const;
    int getTitleHeight()        const;
    int getTitleFontSize()      const;
    QString getTitle()          const;

    bool getShowLegend()        const;
    int getLegendHeight()       const;
    int getLegendFontSize()     const;

    QColor getBgColor()         const;
    QColor getTextColor()       const;
    QColor getHighColor()       const;
    QColor getFlagColor()       const;

    QColor getOutCircleColor()  const;
    QColor getMidCircleColor()  const;
    QColor getInCircleColor()   const;

    QString getOutPieInfos()    const;
    QString getInPieInfos()     const;

    QSize sizeHint()            const;
    QSize minimumSizeHint()     const;

public Q_SLOTS:
    //顯示標題+標題欄高度+標題字號+標題文字
    void setShowTitle(bool showTitle);
    void setTitleHeight(int titleHeight);
    void setTitleFontSize(int titleFontSize);
    void setTitle(const QString &title);

    //顯示圖例+圖例高度+圖例字號
    void setShowLegend(bool showLegend);
    void setLegendHeight(int legendHeight);
    void setLegendFontSize(int legendFontSize);

    //設置背景顏色+文字顏色+高亮顏色+標識顏色
    void setBgColor(const QColor &bgColor);
    void setTextColor(const QColor &textColor);
    void setHighColor(const QColor &highColor);
    void setFlagColor(const QColor &flagColor);

    //設置外圓顏色+中間圓顏色+里邊圓顏色
    void setOutCircleColor(const QColor &outCircleColor);
    void setMidCircleColor(const QColor &midCircleColor);
    void setInCircleColor(const QColor &inCircleColor);

    //字符串形式設置數據
    void setOutPieInfos(const QString &outPieInfos);
    void setInPieInfos(const QString &inPieInfos);

    //設置顏色集合
    void setOutPieColors(const QList<QColor> &outPieColors);
    void setInPieColors(const QList<QColor> &inPieColors);

    //清空+設置餅圖數據
    void clearOutPie();
    void clearInPie();
    void appendOutPie(const RingData &data);
    void appendInPie(const RingData &data);
};

#endif // CUSTOMRING_H

五、核心代碼

void CustomRing::paintEvent(QPaintEvent *)
{
    //繪制准備工作,啟用反鋸齒
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    int titleHeight = showTitle ? this->titleHeight : 0;
    int legendHeight = showLegend ? this->legendHeight : 0;
    QRect rect(0, titleHeight, this->width(), this->height() - titleHeight - legendHeight);
    int side = qMin(rect.width(), rect.height());
    qreal scale = side / 200.0;

    //繪制背景
    drawBg(&painter);

    //平移坐標軸中心,等比例縮放
    painter.save();
    painter.translate(rect.center());
    painter.scale(scale, scale);

    //繪制外圓背景
    drawOutCircle(&painter);
    //繪制外層餅圖
    drawOutPie(&painter, scale, rect.center());
    //繪制中間圓
    drawMidCircle(&painter);
    //繪制里層餅圖
    drawInPie(&painter, scale, rect.center());
    //繪制里邊圓
    drawInCircle(&painter);

    painter.restore();

    //重新等比例縮放,繪制文字,文字放在后面繪制是為了不被圓遮擋
    painter.scale(scale, scale);

    //繪制標題
    if (showTitle) {
        drawTitle(&painter);
    }

    //繪制圖例文字
    if (showLegend) {
        drawLegendText(&painter, scale);
    }
}

void CustomRing::drawBg(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(bgColor);
    painter->drawRoundedRect(this->rect(), 5, 5);
    painter->restore();
}

void CustomRing::drawOutCircle(QPainter *painter)
{
    int radius = 90;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(outCircleColor);
    painter->drawEllipse(QPoint(0, 0), radius, radius);
    painter->restore();
}

void CustomRing::drawMidCircle(QPainter *painter)
{
    int radius = 50;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(midCircleColor);
    painter->drawEllipse(QPoint(0, 0), radius, radius);
    painter->restore();
}

void CustomRing::drawInCircle(QPainter *painter)
{
    int radius = 10;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(inCircleColor);
    painter->drawEllipse(QPoint(0, 0), radius, radius);
    painter->restore();
}

六、控件介紹

超過150個精美控件，涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，flatui、高亮按鈕、滑動選擇器、農歷等。遠超qwt集成的控件數量。
每個類都可以獨立成一個單獨的控件，零耦合，每個控件一個頭文件和一個實現文件，不依賴其他文件，方便單個控件以源碼形式集成到項目中，較少代碼量。qwt的控件類環環相扣，高度耦合，想要使用其中一個控件，必須包含所有的代碼。
全部純Qt編寫，QWidget+QPainter繪制，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等編譯器，支持任意操作系統比如windows+linux+mac+嵌入式linux等，不亂碼，可直接集成到Qt Creator中，和自帶的控件一樣使用，大部分效果只要設置幾個屬性即可，極為方便。
每個控件都有一個對應的單獨的包含該控件源碼的DEMO，方便參考使用。同時還提供一個所有控件使用的集成的DEMO。
每個控件的源代碼都有詳細中文注釋，都按照統一設計規范編寫，方便學習自定義控件的編寫。
每個控件默認配色和demo對應的配色都非常精美。
超過130個可見控件，6個不可見控件。
部分控件提供多種樣式風格選擇，多種指示器樣式選擇。
所有控件自適應窗體拉伸變化。
集成自定義控件屬性設計器，支持拖曳設計，所見即所得，支持導入導出xml格式。
自帶activex控件demo，所有控件可以直接運行在ie瀏覽器中。
集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個圖形字體，享受圖形字體帶來的樂趣。
所有控件最后生成一個dll動態庫文件，可以直接集成到qtcreator中拖曳設計使用。
目前已經有qml版本，后期會考慮出pyqt版本，如果用戶需求量很大的話。

七、SDK下載

SDK下載鏈接：https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取碼：877p
下載鏈接中包含了各個版本的動態庫文件，所有控件的頭文件，使用demo，自定義控件+屬性設計器。
自定義控件插件開放動態庫dll使用（永久免費），無任何后門和限制，請放心使用。
目前已提供26個版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
不定期增加控件和完善控件，不定期更新SDK，歡迎各位提出建議，謝謝！
widget版本（QQ：517216493）qml版本（QQ：373955953）三峰駝（QQ：278969898）。
濤哥的知乎專欄 Qt進階之路 https://zhuanlan.zhihu.com/TaoQt
歡迎關注微信公眾號【高效程序員】，C++/Python、學習方法、寫作技巧、熱門技術、職場發展等內容，干貨多多，福利多多！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Qt編寫自定義控件20-自定義餅圖 Qt編寫自定義控件14-環形進度條編寫Qt Designer自定義控件（二）——編寫自定義控件界面編寫Qt Designer自定義控件（一）——如何創建並使用Qt自定義控件 Qt編寫自定義控件及插件的使用 Qt編寫自定義控件二動畫按鈕 Qt編寫自定義控件一開關按鈕 Qt編寫自定義控件屬性設計器 Qt編寫自定義控件大全 Qt編寫自定義控件57-直方波形圖