一、前言
上次在寫可視化資料大屏電子看闆項目的時候，為了逐漸移除對QChart的依賴(主要是因為QChart真的太垃圾了，是所有Qt的子產品中源碼最爛的一個，看過源碼的人沒有一個不吐槽，不僅不支援10W級别的資料量曲線展示，居然一個餅圖控件，文字部分的展示還用QLabel來顯示的，這麼低效率的方式都有)，起初曲線圖和柱狀圖等都用QCustomPlot替代了，就剩一個餅圖需要自己用無敵的QPainter來繪制了，繪制對應的背景區域難度不大，稍微會用QPainter的人都可以實作，用的就是drawPie繪制即可，關鍵是如何在自己所在的區域繪制對應的文字和百分比，這個需要找到對應區域，然後找到合理的位置擺放文字，這個可能就需要用到一點數學知識了，從圓中心開始，給定對應的角度，對應的偏離值，計算偏離值對應的中心點坐标，此坐标作為繪制文字區域的中心，然後四周擴散一定的距離即可。
二、實作的功能
* 1:可設定文字顔色
* 2:可設定邊框顔色
* 3:可設定顔色集合
* 4:可設定某個區域是否彈出
* 5:可設定是否顯示百分比
三、效果圖
四、核心代碼
void CustomPie::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); //繪制餅圖 drawPie(&painter);}void CustomPie::drawPie(QPainter *painter){ painter->save(); int radius = 93; QRect rect(-radius, -radius, radius * 2, radius * 2); double startAngle = 0; double sum = getSumValue(); //逐個取出值并繪制餅圖區域和對應的文字 int count = labels.count(); for (int i = 0; i < count; ++i) { //取出值并計算目前值占比面積 double value = values.at(i); double arcLength = value / sum * 360; double percent = value / sum * 100; QRect pieRect = rect; //如果目前區域展開則需要設定邊框 painter->setPen(Qt::NoPen); if (explodedIndex == i || explodedAll) { painter->setPen(borderColor); QPoint center = pieRect.center(); int mid = startAngle + arcLength / 2; center += getOffsetPoint(mid); pieRect.moveCenter(center); } //從顔色集合中取出顔色 painter->setBrush(colors.at(i)); painter->drawPie(pieRect, startAngle * 16, arcLength * 16); QString strValue = labels.at(i); if (showPercent && percent > 7) { strValue = QString("%1%2%3%").arg(strValue).arg(strValue.isEmpty() ? "" : "").arg(QString::number(percent, 'f', 0)); } int mid = startAngle + arcLength / 2; int offset = 60; if (percent >= 50) { offset = 45; } else if (percent >= 30) { offset = 55; } else if (percent >= 15) { offset = 60; } QPoint p = getOffsetPoint(mid, offset); QRect textRect; textRect.setX(p.x() - 40); textRect.setY(p.y() - 30); textRect.setWidth(80); textRect.setHeight(60); painter->setPen(Qt::black); //painter->drawRect(textRect); QFont font; font.setPixelSize(strValue.isEmpty() ? 20 : 17); painter->setFont(font); painter->setPen(textColor); painter->drawText(textRect, Qt::AlignCenter, strValue); startAngle += arcLength; } painter->restore();}
六、控件介紹
1. 超過146個精美控件，涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、标尺、溫度計、導覽列、導航欄，flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt內建的控件數量。
2. 每個類都可以獨立成一個單獨的控件，零耦合，每個控件一個頭檔案和一個實作檔案，不依賴其他檔案，友善單個控件以源碼形式內建到項目中，較少代碼量。qwt的控件類環環相扣，高度耦合，想要使用其中一個控件，必須包含所有的代碼。
3. 全部純Qt編寫，QWidget+QPainter繪制，支援Qt4.6到Qt5.12的任何Qt版本，支援mingw、msvc、gcc等編譯器，不亂碼，可直接內建到Qt Creator中，和自帶的控件一樣使用，大部分效果隻要設定幾個屬性即可，極為友善。
4. 每個控件都有一個對應的單獨的包含該控件源碼的DEMO，友善參考使用。同時還提供一個所有控件使用的內建的DEMO。
5. 每個控件的源代碼都有詳細中文注釋，都按照統一設計規範編寫，友善學習自定義控件的編寫。
6. 每個控件預設配色和demo對應的配色都非常精美。
7. 超過130個可見控件，6個不可見控件。
8. 部分控件提供多種樣式風格選擇，多種訓示器樣式選擇。
9. 所有控件自适應窗體拉伸變化。
10. 內建自定義控件屬性設計器，支援拖曳設計，所見即所得，支援導入導出xml格式。
11. 自帶activex控件demo，所有控件可以直接運作在ie浏覽器中。
12. 內建fontawesome圖形字型+阿裡巴巴iconfont收藏的幾百個圖形字型，享受圖形字型帶來的樂趣。
13. 所有控件最後生成一個dll動态庫檔案，可以直接內建到qtcreator中拖曳設計使用。