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

在平時(shí)做頁(yè)面開(kāi)發(fā)時(shí)，有些時(shí)候會(huì)用到圓形進(jìn)度條，比如說(shuō)：下載某個(gè)文件的下載進(jìn)度。

展示效果，如下圖所示：

實(shí)現(xiàn)這個(gè)功能主要由以下幾個(gè)重點(diǎn)：

1：圖形繪制

2：數(shù)值計(jì)算

也算是一個(gè)初級(jí)例子，下面我來(lái)講解下如何實(shí)現(xiàn)這個(gè)簡(jiǎn)單的小功能吧！

功能

自定義繪制類(lèi)：QRoundedProgress

繼承自QWidget

開(kāi)發(fā)環(huán)境：vs2017 + Qt5.14.2

圖形繪制

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

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

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

因?yàn)楹罄m(xù)要繪制圓形，在繪制之前加上抗鋸齒效果，如果不加繪制的圓形線條會(huì)很不流暢哦~

2.圓形進(jìn)度條通道繪制

什么叫做圓形進(jìn)度條的通道呢？

如圖所示的灰色區(qū)域就是圓形進(jìn)度條的通道，也就是我們說(shuō)的圓環(huán)。

實(shí)現(xiàn)方式：兩個(gè)半徑不同的圓重疊在一起（且圓心相同），未重疊的部分也就是圓形的通道區(qū)域。

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

大圓形代碼：

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

以整個(gè)窗口作為圓形的區(qū)域進(jìn)行繪制，顯示效果如下：

m_crProgressChannel：通道號(hào)顏色值，默認(rèn)是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);

以窗口的整體區(qū)域?yàn)闃?biāo)準(zhǔn)，向內(nèi)調(diào)整10個(gè)像素大小，采用了QRect::adjust方法。

10就是圓環(huán)的寬度了。

3.圓形進(jìn)度條繪制

進(jìn)度條也就是在文章最開(kāi)始gif動(dòng)畫(huà)中藍(lán)色的動(dòng)態(tài)條。

該如何簡(jiǎn)單的繪制整個(gè)進(jìn)度呢？

最簡(jiǎn)單的方式：采用QPainter扇形的繪制方式！

在程序中，進(jìn)度條的變化可以采用扇形的區(qū)域進(jìn)行表示。隨著數(shù)據(jù)的變化，扇形的面積也逐漸遞增，直到達(dá)到設(shè)定的最大值為止。

該如何繪制呢？

要是繪制一個(gè)實(shí)心的扇形，直接在小圓形代碼后面追加肯定是不行的，會(huì)出現(xiàn)下面的效果：

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

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

繪制扇形代碼如下：

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

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

4.文本繪制

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

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

數(shù)值計(jì)算

在圓形進(jìn)度條中需要設(shè)置以下幾種計(jì)算

1.計(jì)算步長(zhǎng)

m_fStep = 360.0/ (maximum - minimum);

根據(jù)步長(zhǎng)大小，計(jì)算每次移動(dòng)的扇面面積

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

通常情況下，圓形進(jìn)度條的走向一般是順時(shí)針，但是，在圓形中走向卻是逆時(shí)針?lè)较?，所以在進(jìn)行扇形面積計(jì)算時(shí)，會(huì)從90°逆向繪制。

2.實(shí)時(shí)數(shù)據(jù)計(jì)算

由外界調(diào)用者傳入實(shí)時(shí)變化數(shù)據(jù)，并計(jì)算當(dāng)前加載的百分比數(shù)值。

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

其中，m_sValue該變量是應(yīng)用到drawText中文本繪制的。

到這里，簡(jiǎn)單的圓形進(jìn)度條就繪制完成了~

到此這篇關(guān)于Qt實(shí)現(xiàn)小功能之圓形進(jìn)度條的方法詳解的文章就介紹到這了,更多相關(guān)Qt圓形進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論