Qt之简单的滚动图

最近学了一些简单的动态图，我觉得很有意思，废话不多说，直接看效果    

下面来看下代码

首先画横线部分（.h文件）

public:
    void paintEvent(QPaintEvent *);     //绘画事件的触发
    void setAttitude(float roll);       //时间戳的触发函数

private:
    float m_roll;                       //随时间动态值

这里我定义了两个函数，其实一个函数是绘画事件的必须函数。

然后就是CPP文件了

#include "DrawDirection.h"
#include "ui_DrawDirection.h"

#include <QPainter>
#include <QTimer>
#include <QDebug>

DrawDirection::DrawDirection(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::DrawDirection)
    , m_roll(0)
{
    ui->setupUi(this);

    QTimer *timer = new QTimer;
    connect(timer,&QTimer::timeout,[this](){
        setAttitude(m_roll + 1.0f);
        update();
    });
    timer->start(100);
}

DrawDirection::~DrawDirection()
{
    delete ui;
}

void DrawDirection::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    const QRect &rect = this->rect();
    int x = rect.x();
    int y = rect.y();
    int width = rect.width();
    int height = rect.height();
    const QPoint& center = rect.center();
    painter.fillRect(x,y, x + width,(y + height) /2,QColor(Qt::gray));
    painter.fillRect(x,(y+ height) / 2, x + width,(y + height) / 2,QColor(Qt::red));


    //画横线  定义一个开始点和一个重点，利用DrawLine 连接起来即可。(横线的高度相同，所以endPosY = startPosY)
    int startPosX = x + 70;
    int startPosY = y + 60;

    int endPosX = x + width - 70;
    int endPosY = startPosY;

    //这里画横线的颜色我用的是黄色线条，这里要设置一下
    painter.setPen(QPen(QColor(255,215,0),3));
    painter.drawLine(startPosX,startPosY,endPosX,endPosY);

    //画竖线
    int yaw = m_roll;
    const qreal size1 = yaw / 30;
    const qreal size2 = yaw % 30;
    int yaw1 = size1 * 30;
    qDebug()<<"yaw:"<<yaw ;
    qDebug()<<"size2:"<<size2 ;

    const int num = 7;
    const int pointY1 = y + 40;
    const int pointY2 = y + 55;
    const qreal avgleng = (endPosX - startPosX) * 1.0 / (num - 1); //计算每个竖线的间隔。
    const int moveX = size2 / 30 * avgleng;
    qDebug()<<"moveX:"<<moveX;
    const int left_x = startPosX - moveX;

    painter.setFont(QFont("宋体",20,1));
    int num_top = -90 + yaw1;
    for(int i = 0 ;i< 7;i++)
    {
        QPointF p1(left_x + avgleng * i,pointY1); //这里的left_x+avgleng*i代表每个竖线的X轴长度相等,竖线的位置随着i的变化而变化
        QPointF p2(left_x + avgleng * i,pointY2);
        painter.drawLine(p1,p2);

        if(num_top >= 360)
        {
            num_top = 0;
        }

        if(num_top < 0)
        {
            num_top += 360;
            painter.drawText(left_x + avgleng * i - 10,pointY1 - 10,QString::number(num_top));
        }
        else{
            painter.drawText(left_x + avgleng * i - 5,pointY1 - 10,QString::number(num_top));
        }

        num_top += 30;
    }
    painter.setPen(QPen(QColor(Qt::green),5));
    painter.drawText(center.x() - 5,startPosY + 30,QString::number(yaw));


}

void DrawDirection::setAttitude(float roll)
{
    m_roll = roll;
    if(m_roll > 360)
    {
        m_roll -= 360;
    }
}

代码里的30是我定义的间隔值。你们可以自主定义。效果是一样的。不理解的地方可以留言，我可以解答