環(huán)境：vs2017+Qt5.14.2

效果圖：

準(zhǔn)備工作：
效果圖中的可以轉(zhuǎn)動(dòng)的儀表盤效果分為三個(gè)部分：

1. 背景圖（就是帶去掉中間白色原點(diǎn)，去掉中間藍(lán)色指針省下的部分）；
2. 指針圖片（中間藍(lán)色的指針部分，不包括指針上的白色圓點(diǎn)）；
3. 原點(diǎn)圖片（中間白色的圓點(diǎn)）

原理：
在paintEvent()中繪制這三張圖片。當(dāng)需要旋轉(zhuǎn)指針的角度時(shí)，改變指針圖片的角度，再調(diào)用update()函數(shù)重新繪制顯示就可以了。

具體實(shí)現(xiàn)：
1. 定義旋轉(zhuǎn)角度成員變量：int m_nValue;//指針旋轉(zhuǎn)角度。
2. 重載paintEvent()函數(shù)。
3. 加載三張圖片。
QPixmap img = QPixmap(":/image/banhuan.png");
QPixmap needle = QPixmap(":/image/zhizhen.png");
QPixmap overlay = QPixmap(":/image/zhizhenyuan.png");
4. 在paintEvent()函數(shù)中進(jìn)行繪制。

void CDialBox::paintEvent(QPaintEvent *event)
{
     QPainter painter(this);
     painter.save();//保存
     painter.setRenderHint(QPainter::SmoothPixmapTransform, true); //平滑像素圖，防止圖形走樣
     painter.translate(this->width() / 2, this->height() / 2); // 原點(diǎn)定位在中間位置
     // 背景圖
     painter.drawPixmap(-img->width() / 2, -img->height() / 2, img);
     // 指針圖
     painter.rotate(m_nValue);//設(shè)置旋轉(zhuǎn)角度
     painter.drawPixmap(-needle.width() / 2, -needle.height() + needle.width() / 2, needle);
     //原點(diǎn)圖
     painter.drawPixmap(-overlay.width() / 2, -overlay.height() / 2, overlay);
     painter.restore();//恢復(fù) 
}

• 其中：painter.save();painter.restore();為保存QPainter當(dāng)前的狀態(tài)和恢復(fù)QPainter當(dāng)前的狀態(tài)。這里使用這兩個(gè)函數(shù)主要是服務(wù)于painter.translate()函數(shù)的。
• 因?yàn)閜ainter.translate(x, y)函數(shù)用來(lái)設(shè)置當(dāng)前QPainter的相對(duì)坐標(biāo)。正常QPainter的坐標(biāo)原點(diǎn)(0,0)在屏幕的左上角，調(diào)用painter.translate(x, y)函數(shù)，會(huì)將原點(diǎn)設(shè)置為指定的(x,y)的位置,也就是說(shuō)屏幕的(x,y)為QPainter畫(huà)布的(0,0)位置。
• 為了防止畫(huà)布上的圖片有縮放或拉伸導(dǎo)致的圖像走形，可以調(diào)用painter.setRenderHint(QPainter::SmoothPixmapTransform, true);來(lái)進(jìn)行平滑設(shè)置。
• 在繪制圖形時(shí)順序很重要，先調(diào)用painter.drawPixmap()函數(shù)進(jìn)行繪制的圖形在最下面，后面調(diào)用的會(huì)覆蓋在之前的圖形之上，所以根據(jù)效果圖，應(yīng)該先繪制背景圖片，再繪制指針圖片，最后繪制原點(diǎn)圖片。
• 因?yàn)榇藭r(shí)原點(diǎn)(0,0)的位置在效果圖的最中間位置，所以繪制背景圖時(shí)的（x,y）應(yīng)該為（-img->width() / 2, -img->height() / 2）；
• 指針圖的X值為負(fù)的寬度的一半，Y值為負(fù)的高度的值加上寬度的一半。 調(diào)用painter.rotate()函數(shù)是用來(lái)將畫(huà)布以坐標(biāo)原點(diǎn)為中心進(jìn)行順時(shí)針旋轉(zhuǎn)指定的角度。所以定義一個(gè)成員變量來(lái)給這個(gè)角度進(jìn)行傳值。
  原點(diǎn)圖的（x,y）應(yīng)該為（-overlay.width() / 2, -overlay.height() / 2）；

5.改變指針角度
定義一個(gè)改變指針角度值的函數(shù)void valueChanged(int value)；

void CDialBox::valueChanged(int value) 
{
     m_nValue = value;
     update();
}

設(shè)置角度的值，調(diào)用update()函數(shù)進(jìn)行刷新。調(diào)用update();函數(shù)會(huì)執(zhí)行paintEvent();

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-431140.html

到了這里，關(guān)于Qt | 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的可以轉(zhuǎn)動(dòng)的儀表盤的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！