(QT-UI)十四、在时间轴上绘制一段段时间片

本系列预计实现

①刻度上方文字显示,

②时间轴拖动效果,

③时间轴刻度缩放,

④时间轴和其他控件联动显示,

⑤鼠标放置到时间轴,显示具体时间。

⑥通过定时器,实时更新时间轴

⑦时间轴上绘制时间片

完整代码可见GitHub - 754816/QT_TimeLine: qt时间轴实现效果

1、基础思路

使用QPainter函数,根据时间片的起止时间,绘制矩形框。首先在外部类,获取对应的时间片,信息,通常为一个开始时间(QDateTime startTime)和一个结束时间(QDateTime endTime)为一组时间片,需要校验结束时间要比开始时间大才为正确的时间片,将时间片保存在容器(QVector)中。然后在绘制将单个时间片的开始时间,结束时间,分别转换为时间轴上的起止坐标,再构造成矩形框。最后调用painter.drawRects(vector);完成时间片的绘制

如图所示,这里绘制了今日08:00:00-10:35:00等四段时间片。

2、代码实现

首先构造时间片,定义结构体,然后填充四段时间片

cpp 复制代码
//=========hpp=========
struct TimeInfo_t
{
    QDateTime beginTime;      //时间片开始时间
    QDateTime endTime;        //结束时间
};
QVector<TimeInfo_t> m_VodVec;

//=========cpp=========
void MyTimeLine::InitializeUI()
{
    //预先构造今日的四段时间片
    QDate date = QDate::currentDate();
    TimeInfo_t tempInfo1;
    tempInfo1.beginTime = QDateTime(date, QTime(20,0,0));
    tempInfo1.endTime = QDateTime(date, QTime(22,0,0));
    TimeInfo_t tempInfo2;
    tempInfo2.beginTime = QDateTime(date, QTime(8,0,0));
    tempInfo2.endTime = QDateTime(date, QTime(10,35,0));
    TimeInfo_t tempInfo3;
    tempInfo3.beginTime = QDateTime(date, QTime(11,11,11));
    tempInfo3.endTime = QDateTime(date, QTime(12,34,56));
    TimeInfo_t tempInfo4;
    tempInfo4.beginTime = QDateTime(date, QTime(16,25,25));
    tempInfo4.endTime = QDateTime(date, QTime(16,26,26));
    m_VodVec = {tempInfo1, tempInfo2, tempInfo3, tempInfo4};
}

然后添加计算时间片的函数,将起止时间,转换为时间轴上的坐标。将传入的时间减去当前显示的时间(m_MoveDateTime),得到时间差t1,用时间差t1除以时间间隔(m_IntervalType),得到占有的时间比例,如当前时间间隔为1小时,t1为2小时,则计算出的ratio的值为2。再用ratio乘以每个时间间隔对应的像素宽度,得到相对于当前显示的时间的偏移像素。

cpp 复制代码
QVector<QRect> MyTimeLine::CalVodRects()
{
    auto func_px = [&](QDateTime time)
    {
        int px = 0;
        int mid =  this->size().width() / 2;
        //将传入的时间减去当前显示的时间(m_MoveDateTime),得到时间差t1
        qint64 t1 = time.toSecsSinceEpoch() - m_MoveDateTime.toSecsSinceEpoch();
        //用时间差t1除以时间间隔(m_IntervalType),得到占有的时间比例
        //如当前时间间隔为1小时,t1为2小时,则计算出的ratio的值为2
        double ratio = (double)t1 / (double)m_IntervalType;
        //再用ratio乘以每个时间间隔对应的像素宽度,得到相对于当前显示的时间的偏移像素
        px = ratio * m_blockWidth + this->size().width() / 2;
        return px;
    };
    int TimeLineHeight = this->size().height();
    QVector<QRect> VodRects;
    for(auto iter : m_VodVec)
    {
        int begin = func_px(iter.beginTime);
        int end = func_px(iter.endTime) - begin;
        VodRects.push_back(QRect(begin, 0,  end, TimeLineHeight));
        //qDebug () << "begin:" << begin << "end:" << end;
    }
    return VodRects;
}

在这个过程中已经,实现了考虑时间轴的拖动和缩放,始终是计算相对于时间轴的当前时间的前后偏移情况。

最后在PaintEvent函数中,使用drawRects函数,添加绘制效果

cpp 复制代码
void MyTimeLine::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QPen pen;
    //设置为自定义的浅绿色 const QColor TransGreen = QColor(150, 220, 100, 80);//半透明绿色
    pen.setColor(TimeLineStyle::TransGreen);        
    QBrush brush1(TimeLineStyle::TransGreen);
    painter.setBrush(brush1);
    painter.setPen(pen);
    painter.drawRects(VodTimes);
}
相关推荐
UI罐头12 小时前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
UI前端开发工作室15 小时前
UI前端与数字孪生融合新领域拓展:智慧教育的虚拟实验室建设
ui
前端开发与ui设计的老司机21 小时前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
前端开发与ui设计的老司机1 天前
大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
大数据·ui
前端开发与ui设计的老司机1 天前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
前端世界1 天前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
共享ui设计和前端开发人才2 天前
数字孪生技术引领UI前端设计新风向:跨领域数据融合的可视化
ui
UI设计和前端开发从业者2 天前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
desssq2 天前
嘉立创黄山派下载watch ui demo 教程(sf32)
ui·嵌入式·嘉立创·黄山派
写不出来就跑路3 天前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui