实现高低温曲线的绘制,并实现双击更新高低温标签

1. 开始绘制

本节来实现drawTempLine()函数,来绘制高温和低温。

// 温度曲线相关的宏
#define PADDING 50
#define INCREMENT 8       // 温度曲线像素增量
#define POINT_RADIUS 3    // 曲线描点的大小
#define TEXT_OFFSET_X 12  // 温度文本相对于点的偏移
#define TEXT_OFFSET_Y 10  // 温度文本相对于点的偏移

void Widget::drawTempLine(bool high)
{
    qDebug() << "drawTempLine(bool high): " << high;

    // 高温 or 低温
    QLabel *curLabel = (high ? ui->lblHigh : ui->lblLow);
    QVector<int> curValues = (high ? highValues : lowValues);

    QPainter painter(curLabel);
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 1. 计算 x 轴坐标
    int pointX[7] = {0};
    for (int i = 0; i < 7; i++) {
        pointX[i] = curLabel->pos().x() + PADDING + (curLabel->width() - PADDING * 2) / 6 * i;
    }

    // 2. 计算 y 轴坐标
    // 2.1 计算平均值
    int tempSum = 0;
    int tempAverage = 0;

    for (int i = 0; i < 7; i++) {
        tempSum += (curValues[i]);
    }
    tempAverage = tempSum / 7;  // 温度平均值

    // 2.2 计算 y 轴坐标
    int pointY[7] = {0};
    int yCenter = curLabel->height() / 2;
    int increment = curLabel->height() / 20;
    for (int i = 0; i < 7; i++) {
        pointY[i] = yCenter - ((curValues[i] - tempAverage) * increment);
    }

    // 3. 开始绘制
    // 3.1 初始化画笔
    QPen pen = painter.pen();
    pen.setWidth(2);                                                 // 画笔宽度
    pen.setColor(high ? QColor(30, 160, 60) : QColor(255, 170, 0));  // 画笔颜色

    painter.setPen(pen);
    painter.setBrush(high ? QColor(30, 160, 60) : QColor(255, 170, 0));  // 画刷颜色
    painter.setFont(QFont("Microsoft YaHei", 14));

    // 3.2 画点、写文本
    for (int i = 0; i < 7; i++) {
        painter.drawEllipse(QPoint(pointX[i], pointY[i]), POINT_RADIUS, POINT_RADIUS);
        painter.drawText(QPoint(pointX[i] - TEXT_OFFSET_X, pointY[i] - TEXT_OFFSET_Y), QString::number(curValues[i]) + "°");
    }

    // 3.3 绘制曲线
    for (int i = 0; i < 6; i++) {
        pen.setStyle(i == 0 ? Qt::DotLine : Qt::SolidLine);  // 虚线
        painter.setPen(pen);
        painter.drawLine(pointX[i], pointY[i], pointX[i + 1], pointY[i + 1]);
    }
}

2. 双击重绘曲线

双击高温标签或低温标签,更新高低温的温度值,并重绘曲线
只需实现updateTempValues()函数,如下:

#include <QRandomGenerator>

void Widget::updateTempValues()
{
    qDebug() << "updateTempValue()";

    for (int i = 0; i < 7; i++) {
        highValues[i] = 20 + QRandomGenerator::global()->generate() % 10;
        lowValues[i] = -5 + QRandomGenerator::global()->generate() % 10;
    }

    ui->lblHigh->update();
    ui->lblLow->update();
}

此时,每次双击鼠标,就可以刷新高低温曲线了!