实现高低温曲线的绘制,并实现双击更新高低温标签
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();
}
此时,每次双击鼠标,就可以刷新高低温曲线了!






