Qt天气预报系统绘制温度曲线

1、安装事件过滤器

//给标签添加事件过滤器
ui->higntTemLabel->installEventFilter(this);        //高温事件过滤器
ui->lowTemLabel->installEventFilter(this);          //低温事件过滤器

2、实现事件过滤器

//事件过滤
bool MainWindow::eventFilter(QObject *watched, QEvent *event)
{
    if(event->type() == QEvent::Paint)
    {
        //"watched" 是否等于 "ui->higntTemLabel"，来判断是否是标签控件 "ui->higntTemLabel" 的绘图事件
        if(watched == ui->higntTemLabel)
        {
            paintHightTemCure();        //绘制高温
        }

        if(watched == ui->lowTemLabel)
        {
            paintLowTemCure();          //绘制低温
        }
    }
    return QWidget::eventFilter(watched,event);

}

3、定义一些常量

#define INCREMENT 3         //温度升高或降低y轴增量
#define POINT_RADIUS 3      //绘制温度曲线点的半径

#define OFFSET_X 19  //离温度曲线平均值的x坐标
#define OFFSET_Y 12  //离温度曲线平均值的x坐标

4、绘制高温曲线

//绘制高温曲线
void MainWindow::paintHightTemCure()
{
    QPainter painter(ui->higntTemLabel);    // 创建一个QPainter对象，将ui->higntTemLabel作为绘图设备

    //抗锯齿
    painter.setRenderHint(QPainter::Antialiasing,true);

    //1、获取x坐标
    int pointX[7] = {0};        //定义一个数组存储温度x坐标
    //遍历7个点
    for(int i=0; i<7;i++)
    {
        pointX[i] = windDirectionList[i]->pos().x() + windDirectionList[i]->width()/2;;
    }


    //获取y坐标
    int tempSum = 0;         //高温总和
    int tempAverage = 0;    //高温平均值

    for(int i=0; i<7; i++)
    {
        tempSum += day[i].highTem;      //7天高温值的总和
    }
    tempAverage = tempSum/7;            //7天温度平均值

    //计算Y坐标
    int pointY[7] = {0};        //7个y点坐标

    int centerY = ui->higntTemLabel->height()/2;    //高温标签y的中心坐标
    for(int i=0; i<7; i++)
    {
        pointY[i] = centerY - ((day[i].highTem-tempAverage)*INCREMENT);    //获得7个点y坐标
    }

    //开始绘制
    //初始化画笔
    QPen pen = painter.pen();                //获得画笔
    pen.setWidth(1);                        //画笔宽度
    pen.setColor(QColor(45,224,217));       //设置画笔颜色

    painter.setPen(pen);            //设置画笔
    painter.setBrush(QColor(45,224,217));       //设置画刷，内部填充颜色

    //画点，画文本
    for(int i=0; i<7; i++)
    {
        painter.drawEllipse(QPoint(pointX[i],pointY[i]), POINT_RADIUS,POINT_RADIUS);    //画7个点的圆圈


        //显示文本
        painter.drawText(pointX[i]-OFFSET_X,pointY[i]-OFFSET_Y,QString::number(day[i].highTem) + "℃");
    }

    //绘制曲线
    for(int i=0; i < 6; i++)
    {
        if(i==0)
        {
            pen.setStyle(Qt::DotLine);      //画虚线
            painter.setPen(pen);            //设置画笔
        }
        else
        {
            pen.setStyle(Qt::SolidLine);     //画实线
            painter.setPen(pen);             //设置画笔
        }

        painter.drawLine(pointX[i],pointY[i],pointX[i+1],pointY[i+1]);      //画7天的线
    }
}

5、绘制低温曲线

//绘制低温曲线
void MainWindow::paintLowTemCure()
{
    QPainter painter(ui->lowTemLabel);    // 创建一个QPainter对象，将ui->higntTemLabel作为绘图设备

    //抗锯齿
    painter.setRenderHint(QPainter::Antialiasing,true);

    //1、获取x坐标
    int pointX[7] = {0};        //定义一个数组存储温度x坐标
    //遍历7个点
    for(int i=0; i<7;i++)
    {
        pointX[i] = windDirectionList[i]->pos().x() + windDirectionList[i]->width()/2;;
    }


    //获取y坐标
    int tempSum = 0;         //高温总和
    int tempAverage = 0;    //高温平均值

    for(int i=0; i<7; i++)
    {
        tempSum += day[i].lowTem;      //7天高温值的总和
    }
    tempAverage = tempSum/7;            //7天温度平均值

    //计算Y坐标
    int pointY[7] = {0};        //7个y点坐标

    int centerY = ui->lowTemLabel->height()/2;    //高温标签y的中心坐标
    for(int i=0; i<7; i++)
    {
        pointY[i] = centerY - ((day[i].lowTem-tempAverage)*INCREMENT);    //获得7个点y坐标
    }

    //开始绘制
    //初始化画笔
    QPen pen = painter.pen();                //获得画笔
    pen.setWidth(1);                        //画笔宽度
    pen.setColor(QColor(255,223,0));       //设置画笔颜色

    painter.setPen(pen);            //设置画笔
    painter.setBrush(QColor(255,223,0));       //设置画刷，内部填充颜色

    //画点，画文本
    for(int i=0; i<7; i++)
    {
        painter.drawEllipse(QPoint(pointX[i],pointY[i]), POINT_RADIUS,POINT_RADIUS);    //画7个点的圆圈

//        qDebug() << day[i].lowTem;
        //显示文本
        painter.drawText(pointX[i]-OFFSET_X,pointY[i]-OFFSET_Y,QString::number(day[i].lowTem) + "℃");
    }

    //绘制曲线
    for(int i=0; i < 6; i++)
    {
        if(i==0)
        {
            pen.setStyle(Qt::DotLine);      //画虚线
            painter.setPen(pen);            //设置画笔
        }
        else
        {
            pen.setStyle(Qt::SolidLine);     //画实线
            painter.setPen(pen);             //设置画笔
        }

        painter.drawLine(pointX[i],pointY[i],pointX[i+1],pointY[i+1]);      //画7天的线
    }

}

6、在UI函数里更新事件

//不添加温度就会显示为0℃
ui->higntTemLabel->update();
ui->lowTemLabel->update();

7、代码仓库地址

仓库地址

8、总结

以上就是Qt天气预报系统实现的整个过程了，浏览过程中，如若发现错误，欢迎大家指正，有问题的欢迎评论区留言或者私信。最后，如果大家觉得有所帮助，可以点一下赞，谢谢大家！祝大家天天开心，顺遂无虞！

Qt天气预报系统完成！