基于QT實(shí)現(xiàn)自定義溫度計(jì)的示例代碼

更新時(shí)間：2023年11月07日 14:00:41 作者：瘋狂的挖掘機(jī)

QT原生控件沒(méi)有實(shí)現(xiàn)如儀表盤(pán)或者溫度計(jì)的控件,只好自己實(shí)現(xiàn),所以本文為大家介紹了如何利用qt實(shí)現(xiàn)自定義溫度/濕度控件,感興趣的小伙伴可以了解下

0 引入

QT原生控件沒(méi)有實(shí)現(xiàn)如儀表盤(pán)或者溫度計(jì)的控件，只好自己實(shí)現(xiàn)，文章代碼部分參考引用的文章。直接上圖

圖一帶有標(biāo)尺的溫度計(jì)、濕度

圖二溫度計(jì)、濕度

控件最核心的部分：在函數(shù)paintEvent繪制部分，如果需要?jiǎng)赢?huà)效果還需要加一個(gè)QPropertyAnimation ，這是最主要的，剩下的細(xì)節(jié)根據(jù)需求增加減少即可。

1、帶有標(biāo)尺的溫度/濕度計(jì)控件

因?yàn)橹蛔鰯?shù)據(jù)顯示用，所以只需要向控件傳數(shù)據(jù)即可。

主要功能：

1、可設(shè)置顯示范圍；

2、顯示過(guò)程中加了動(dòng)畫(huà)效果；

3、背景色和前景色以及刻度尺顏色可變；

4、刻度尺間距可變，控件大小隨著QWidget適應(yīng)；

1.頭文件

代碼如下（示例）：

protected:
    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawProgress(QPainter *painter);
    void drawRulerTop(QPainter *painter);
    void drawRulerBottom(QPainter *painter);

private:
    QPropertyAnimation *m_valueAnimation;
    double minValue;                //最小值
    double maxValue;                //最大值
    qreal value;                    //當(dāng)前值
    int longStep;                   //長(zhǎng)線條等分步長(zhǎng)
    int shortStep;                  //短線條等分步長(zhǎng)
    bool rulerTop;                  //刻度線在上面
    bool isAdd;                     //是否為增加，默認(rèn)為的增加

    QColor bgColor;                 //背景顏色
    QColor lineColor;               //線條顏色
    QColor progressColor;           //進(jìn)度顏色

public:
    qreal getValue()               const;
    void setrulerTop(bool istop);   //設(shè)定刻度線再上還是在下，默認(rèn)是在上
    void setValue(qreal v);
    void setRange(int minValue, int maxValue);
    void startAnimation();
    void updateValue(double value);
    void setBgColor(const QColor &bgColor);               //設(shè)置背景顏色
    void setLineColor(const QColor &lineColor);           //設(shè)置線條顏色
    void setProgressColor(const QColor &progressColor);   //設(shè)置進(jìn)度顏色

2.核心代碼

繪制部分參考引用2代碼，感謝劉典武老師的無(wú)私開(kāi)源，有需要的可去做定制。

代碼如下：

void HumidityProgress::startAnimation()
{
    qreal startValue =  value;
    if(isAdd)
    {
        m_valueAnimation->setKeyValueAt(0.5, value+0.5);
        m_valueAnimation->setKeyValueAt(1, value);
        m_valueAnimation->setStartValue(startValue-0.5);
        m_valueAnimation->start();
    }
    else{
        m_valueAnimation->setKeyValueAt(0.5, value-0.5);
        m_valueAnimation->setKeyValueAt(1, value);
        m_valueAnimation->setStartValue(startValue+0.5);
        m_valueAnimation->start();
    }

}

void HumidityProgress::paintEvent(QPaintEvent *)
{
    //繪制準(zhǔn)備工作,啟用反鋸齒
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //按照繪制順序
    drawBg(&painter);
    drawProgress(&painter);
    if (rulerTop) {
        drawRulerTop(&painter);
    } else {
        drawRulerBottom(&painter);
    }
}

void HumidityProgress::drawBg(QPainter *painter)
{
    painter->save();
    painter->setPen(lineColor);
    painter->setBrush(bgColor);
    painter->drawRect(rect());
    painter->restore();
}

void HumidityProgress::drawProgress(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(progressColor);

    double length = width();
    double increment = length / (maxValue - minValue);
    double initX = (value - minValue) * increment;

    QRect rect(0, 0, initX, height());
    painter->drawRect(rect);
    painter->restore();
}

void HumidityProgress::drawRulerTop(QPainter *painter)
{
    painter->save();
    painter->setPen(lineColor);

    double initX = 0;

    //繪制橫向標(biāo)尺上部分底部線
    double initTopY = 0;
    QPointF lineTopLeftPot = QPointF(initX, initTopY);
    QPointF lineTopRightPot = QPointF(width() - initX, initTopY);
    painter->drawLine(lineTopLeftPot, lineTopRightPot);

    //繪制上部分及下部分橫向標(biāo)尺刻度
    double length = width();
    //計(jì)算每一格移動(dòng)多少
    double increment = length / (maxValue - minValue);
    //長(zhǎng)線條短線條長(zhǎng)度
    int longLineLen = 15;
    int shortLineLen = 10;

    //根據(jù)范圍值繪制刻度值及刻度值 長(zhǎng)線條需要移動(dòng)10像素 短線條需要移動(dòng)5像素
    for (int i = minValue; i <= maxValue; i = i + shortStep) {
        if (i % longStep == 0) {
            QPointF topPot = QPointF(initX, initTopY);
            QPointF bottomPot = QPointF(initX, initTopY + longLineLen);
            painter->drawLine(topPot, bottomPot);

            //第一個(gè)值和最后一個(gè)值不要繪制
            if (i == minValue || i == maxValue) {
                initX += increment * shortStep;
                continue;
            }

            QString strValue = QString("%1").arg((double)i, 0, 'f', 0);
            double textWidth = fontMetrics().width(strValue);
            double textHeight = fontMetrics().height();

            QPointF textPot = QPointF(initX - textWidth / 2, initTopY + textHeight + longLineLen);
            painter->drawText(textPot, strValue);
        } else {
            if (i % (longStep / 2) == 0) {
                shortLineLen = 10;
            } else {
                shortLineLen = 6;
            }

            QPointF topPot = QPointF(initX, initTopY);
            QPointF bottomPot = QPointF(initX, initTopY + shortLineLen);
            painter->drawLine(topPot, bottomPot);
        }

        initX += increment * shortStep;
    }

    painter->restore();
}

該處使用的url網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)。

2、豎起來(lái)的溫度/濕度計(jì)控件

因?yàn)橹蛔鰯?shù)據(jù)顯示用，所以只需要向控件傳數(shù)據(jù)即可。

控件是好看，但是大小不能改變，所以這里需要自己實(shí)現(xiàn)了，源碼作者已經(jīng)放上。

1.頭文件

代碼如下（示例）：

#ifndef THERMOMETREDLG_H
#define THERMOMETREDLG_H
#include <QWidget>
#include <QPropertyAnimation>
#include <QPainter>
#include <QTimer>
class thermometreDlg : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(qreal value READ getValue WRITE setValue)  //聲明屬性
public:
    explicit thermometreDlg(QWidget *parent = nullptr);
    qreal getValue();
    void setValue(qreal value);
    void changeValue(qreal value);
protected:
    void paintEvent(QPaintEvent *e);
public slots:
    void startAnimation();
signals:
private:
    qreal m_value;
    qreal curValue;
    int m_width;
    QRectF m_rect;
    int maxValue, minValue;
    qreal m_radius;
    QPropertyAnimation *m_valueAnimation;
    void updateRect();
};
#endif // THERMOMETREDLG_H

2.實(shí)現(xiàn)

代碼如下（示例）：

#include "thermometredlg.h"
#include <QDebug>
thermometreDlg::thermometreDlg(QWidget *parent) : QWidget(parent)
{
    m_width = 20;
    maxValue = 100;
    minValue = 0;
    m_radius = 1.05;
    m_value = 0;
    curValue = m_value;
    QTimer *at = new QTimer(this);
    at->start(1000);
    m_valueAnimation = new QPropertyAnimation(this, "value");
    m_valueAnimation->setDuration(1000);
    m_valueAnimation->setEasingCurve(QEasingCurve::OutCubic);
    m_valueAnimation->setLoopCount(1);
    connect(at, SIGNAL(timeout()), this, SLOT(startAnimation()));
}
void thermometreDlg::updateRect()
{
    m_rect.setX(0);
    m_rect.setY(20 - height()/2);
    m_rect.setWidth(m_width);
    m_rect.setHeight(height() - 40 - m_width* m_radius);
}
void thermometreDlg::setValue(qreal value)
{
    m_value = value;
    update();
}
void thermometreDlg::changeValue(qreal value)
{
    if(value > maxValue)
        value = maxValue;
    if(value < minValue)
        value = minValue;
    curValue = value;
}
qreal thermometreDlg::getValue()
{
    return m_value;
}
void thermometreDlg::paintEvent(QPaintEvent *e)
{
    updateRect();
    QPainter painter(this);
    QPen pen(Qt::black);
    painter.translate(this->width()/2, this->height()/2);  //坐標(biāo)軸移動(dòng)到中心點(diǎn)
    painter.setRenderHints(QPainter::TextAntialiasing | QPainter::Antialiasing);  // 啟用反鋸齒
    painter.save();
    //繪制上方的柱狀
    painter.fillRect(m_rect, QColor(168,200, 225));
    //繪制底部的圓
    QRectF tmpRect = QRectF(m_rect.bottomLeft(), QPointF(m_width, height()/2- m_width*m_radius));
    painter.fillRect(tmpRect, QColor(255, 0, 0));
    painter.setPen(Qt::NoPen);
    painter.setBrush(QColor(255, 0, 0));
    painter.drawEllipse(tmpRect.bottomLeft()+QPointF(tmpRect.width()/2, 0),m_width*m_radius, m_width*m_radius);
    painter.restore();
    //繪制刻度以及刻度值
    painter.save();
    painter.setPen(QColor(Qt::black));
    int nYCount = (maxValue - minValue)/10+1;
    qreal perHeight = (m_rect.height())/nYCount;
    for (int i=0; i<nYCount; ++i) {
        QPointF basePoint = m_rect.bottomLeft() - QPointF(0, perHeight/2) - QPointF(0, perHeight*i);
        //左側(cè)大刻度
        painter.drawLine(basePoint, basePoint+QPointF(-10, 0));
        for (int j=1; j<10; ++j) {
            if(i == nYCount -1)
                continue;
            painter.drawLine(basePoint-QPointF(0, perHeight/10*j),basePoint-QPointF(5, perHeight/10*j));
        }
        painter.drawText(basePoint+QPointF(-28, 4), QString("%1").arg(minValue+i*10));
        //右側(cè)大刻度
        basePoint = m_rect.bottomRight() - QPointF(0, perHeight/2) - QPointF(0, perHeight*i);
        painter.drawLine(basePoint, basePoint+QPointF(10, 0));
        for (int j=1; j<10; ++j) {
            if(i == nYCount -1)
                continue;
            painter.drawLine(basePoint-QPointF(0, perHeight/10*j),basePoint-QPointF(-5, perHeight/10*j));
        }
    }
    painter.restore();
    //根據(jù)值填充m_rect
    qreal h = (m_value-minValue)/(maxValue-minValue)*(m_rect.height()-perHeight);
    if(h<0)
        h = 0;
    if(h > m_rect.height())
        h = m_rect.height();
    painter.fillRect(m_rect.adjusted(0, m_rect.height()-h-perHeight/2-1 , 0, 0), QColor(255, 0, 0));
    QWidget::paintEvent(e);
}
void thermometreDlg::startAnimation()
{
    qreal startValue = getValue();
    m_valueAnimation->setKeyValueAt(0, startValue-1);
    m_valueAnimation->setKeyValueAt(0.5, curValue+1);
    m_valueAnimation->setKeyValueAt(1, curValue);
    m_valueAnimation->setStartValue(startValue-2);
    m_valueAnimation->start();
}

以上就是基于QT實(shí)現(xiàn)自定義溫度計(jì)的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于QT溫度計(jì)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: