在Qt自帶的控件中，只有垂直進度條、水平進度條兩種。

在平時做頁面開發時，有些時候會用到圓形進度條，比如說：下載某個文件的下載進度。

展示效果，如下圖所示：

實現這個功能主要由以下幾個重點：

1：圖形繪制

2：數值計算

也算是一個初級例子，下面我來講解下如何實現這個簡單的小功能吧！

功能

自定義繪制類：QRoundedProgress

繼承自QWidget

開發環境：vs2017 + Qt5.14.2

圖形繪制

1.繪制窗口整體背景色值

QPainter painter(this);
painter.fillRect(this->rect(), m_crBack);
painter.setRenderHint(QPainter::Antialiasing); //抗鋸齒

m_crBack：窗口背景色，默認是QColor(255, 255, 255);

因為后續要繪制圓形，在繪制之前加上抗鋸齒效果，如果不加繪制的圓形線條會很不流暢哦~

2.圓形進度條通道繪制

什么叫做圓形進度條的通道呢？

如圖所示的灰色區域就是圓形進度條的通道，也就是我們說的圓環。

實現方式：兩個半徑不同的圓重疊在一起（且圓心相同），未重疊的部分也就是圓形的通道區域。

假設QRoundedProgress類大小是：QSize(100, 100)，也就是說該窗口的寬度=100，高度=100。

大圓形代碼：

painter.setPen(m_crProgressChannel);
painter.setBrush(m_crProgressChannel);
painter.drawEllipse(this->rect());

以整個窗口作為圓形的區域進行繪制，顯示效果如下：

m_crProgressChannel：通道號顏色值，默認是QColor(220, 220, 220);

小圓形代碼：

QRect rectInCircl = this->rect();
rectInCircl.adjust(10, 10, -10, -10);
painter.setPen(m_crBack);
painter.setBrush(m_crBack);
painter.drawEllipse(rectInCircl);

以窗口的整體區域為標準，向內調整10個像素大小，采用了QRect::adjust方法。

10就是圓環的寬度了。

3.圓形進度條繪制

進度條也就是在文章最開始gif動畫中藍色的動態條。

該如何簡單的繪制整個進度呢？

最簡單的方式：采用QPainter扇形的繪制方式！

在程序中，進度條的變化可以采用扇形的區域進行表示。隨著數據的變化，扇形的面積也逐漸遞增，直到達到設定的最大值為止。

該如何繪制呢？

要是繪制一個實心的扇形，直接在小圓形代碼后面追加肯定是不行的，會出現下面的效果：

小圓形直接被覆蓋住了，這樣的效果與文章最開始的展示效果是不一致的。

修改方式：將扇形繪制的方法放置到大圓形、小圓形代碼之間

繪制扇形代碼如下：

painter.setPen(m_crProgressBar);
painter.setBrush(m_crProgressBar);
painter.drawPie(this->rect(), 90 * 16, -m_nValue * m_fStep * 16);

m_crProgressBar：圓形進度條顏色值，默認是QColor(16, 142, 233);

4.文本繪制

圖形繪制完成后，最后繪制文本展示

painter.setFont(m_font);
painter.setPen(m_crText);
painter.drawText(rectInCircl, Qt::AlignHCenter| Qt::AlignVCenter, m_sValue);

數值計算

在圓形進度條中需要設置以下幾種計算

1.計算步長

m_fStep = 360.0/ (maximum - minimum);

根據步長大小，計算每次移動的扇面面積

painter.drawPie(this->rect(), 90 * 16, -m_nValue * m_fStep * 16);

通常情況下，圓形進度條的走向一般是順時針，但是，在圓形中走向卻是逆時針方向，所以在進行扇形面積計算時，會從90°逆向繪制。

2.實時數據計算

由外界調用者傳入實時變化數據，并計算當前加載的百分比數值。

float fNum = (value*1.0) / (m_nMaxMum - m_nMinMum);
m_sValue = QString::number(fNum*100, 'f', 0) + QStringLiteral("%");

其中，m_sValue該變量是應用到drawText中文本繪制的。

到這里，簡單的圓形進度條就繪制完成了~