基于Qt的開源液位控件

如今，很多智能手機上都提供了非常漂亮的控件，用來實作特定的人機互動功能。比如本題所述的液位控件，它采用拟物化的方式，以波浪液位訓示數值的大小。如果在PC上也能使用這種控件該多好啊。網上目前能找到的類似控件，要麼不能跨平台，要麼是閉源的，是以，還是自己開發一款液位控件才友善。

本液位控件基于Qt 5開發。開發這樣一個液位控件分為如下幾個步驟：

· 設定剪裁形狀（矩形/橢圓）。

· 繪制背景。

· 繪制雙層波浪液位。

· 繪制前景邊框。

· 繪制百分比文本。

下面進行詳細介紹。

1．設定剪裁形狀（矩形/橢圓）

設定剪裁形狀，主要是設定液位控件的外觀為矩形還是橢圓。

void CWaveWidget::drawClipPath(QPainter* painter) {
    QPainterPath clipPath;
    if (m_bClipPathEllipse) {
        clipPath.addEllipse(this->rect());
    }
    else {
        clipPath.addRoundedRect(this->rect(), m_radius, m_radius);
    }
    painter->setClipPath(clipPath);
}
           

2．繪制背景

繪制背景，指的是繪制波浪後面的背景部分。

void CWaveWidget::drawBackground(QPainter* painter) {
    painter->setBrush(m_backgroundBrush);
    painter->drawRect(this->rect());
}
           

3．繪制雙層波浪液位

波浪液位部分的繪制如代碼清單1-1所示。波浪采用QPainterPath進行繪制，用正弦波來表示波浪，再加上線段進而連接配接成封閉區域，見标号①處。在繪制波浪時，應先繪制後方波浪，再繪制前方波浪，見标号②處。

代碼清單1-1

void CWaveWidget::drawWater(QPainter* painter) {
    int startX = 0;
    int startY = 0;
    int endX = this->width();
    int endY = this->height();
    float height = endY - (float)endY*(this->m_fValue / 100);
    QPainterPath waterPathFront;
    waterPathFront.moveTo(startX, endY);
    QPainterPath waterPathBack;
    waterPathBack.moveTo(startX, endY);
    for (int i = 0; i <= endX; i++) {
        float y1, y2;
        y1 = 15 * qSin(0.035*i + m_offset) + height; // 前方波浪（正弦函數）①
        y2 = 15 * qSin(0.035*i + 30+ m_offset) + height; // 後方波浪（正弦函數）
        if (qAbs(m_fValue) < C_DELTA) { // 極數處理
            y1 = y2 = endY;
        }
        if (qAbs(m_fValue-100.) < C_DELTA) {// 極數處理
            y1 = y2 = 0;
        }
        waterPathFront.lineTo(i, y1);
        waterPathBack.lineTo(i, y2);
    }
    waterPathFront.lineTo(endX, endY);
    waterPathBack.lineTo(endX, endY);
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(m_waveBrush2);
    painter->drawPath(waterPathBack);                                 ②
    painter->setBrush(m_waveBrush);
    painter->drawPath(waterPathFront);
painter->restore();
}
           

4．繪制前景邊框

為了美觀，可以為液位控件繪制前景的邊框。

void CWaveWidget::drawForeground(QPainter* painter) {
    painter->setCompositionMode(QPainter::CompositionMode_SourceIn);
    QPen pn(m_frameColor);
    pn.setWidthF(m_frameWidth);
    painter->setPen(pn);
    painter->setBrush(Qt::NoBrush);
    if (m_bClipPathEllipse) {
        painter->drawEllipse(this->rect());
    }
    else {
        painter->drawRoundedRect(this->rect(), m_radius, m_radius);
    }
}
           

5．繪制百分比文本

最後，為了訓示液位的具體數值，還需要繪制百分比文本，見代碼清單1-2。

代碼清單1-2

void CWaveWidget::drawForeground(QPainter* painter) {
    QPen pn(m_frameColor);
    pn.setWidthF(m_frameWidth);
    painter->setPen(pn);
    painter->setBrush(Qt::NoBrush);
    if (m_bClipPathEllipse) {
        painter->drawEllipse(this->rect());
    }
    else {
        painter->drawRoundedRect(this->rect(), m_radius, m_radius);
    }
}
           

這樣，一款液位控件就開發完成了。為了節省篇幅，将CWaveWidget的接口省略。對源代碼感興趣的朋友可以關注微信公衆号[軟體特攻隊]，回複: qx0002。