Qt之时间轴样式汇总

一、简述

根据小伙伴的反应情况,时间轴的需求还是挺多的,对应视频播放,视频监控等功能都需要时间轴的辅助。时间轴也是各式各样,但都大同小异。

时间轴的功能大致可以总结为一下几点:

  1. 自由设置时间段
  2. 刻度间隔可设置
  3. 时间表达式(1、01、1:00、01:00)
  4. 刻度线,刻度值,背景样式颜色
  5. 鼠标滚轮放大缩小功能(时间刻度比较拥挤时很管用)
  6. 鼠标拖拽移动时间刻度
  7. 时间轴与数据相结合(比如监控视频时间区间段)
  8. 时间轴与GraphicsView相结合
  9. 时间轴滚动动画效果

其实时间轴具体怎么用看自己需求,以上整理了时间轴的一些通用功能。

第一期的时间轴是一个朋友帮忙做的,带一个自动滑动的动画效果,后期的时间轴以此推演过来。

初期的时间轴

在这里插入图片描述
也是可以设置颜色样式的。
在这里插入图片描述


时间轴与GraphicsView结合

在这里插入图片描述


模仿大华监控视频(时间轴与数据结合)

在这里插入图片描述
可自由设置时间段(0-24小时),具体时间段内视频数据,多个视频数据显示,鼠标滚轮放缩等功能。
在这里插入图片描述
在这里插入图片描述

最新加入了刻度针

在这里插入图片描述

刻度针在视频区域移动(绿色区域)

在这里插入图片描述

简略版

在这里插入图片描述


时间轴与图片数据相结合

在这里插入图片描述

在这里插入图片描述

新增数据上下换层拖动效果

在这里插入图片描述

在这里插入图片描述

增加多日期显示

可设置几天,几个月的时间进行显示,对绘制进行了优化,之前的时间轴只支持24小时制,此版本改版优化了绘制,可以绘制很多天的时间轴及数据,也不会因为数据过多而卡顿,支持一级的放大,最小刻度从20分钟变为20秒为单位,以方便查看数据。也可在此基础上增加更多级别的放大或缩小。
在这里插入图片描述

总之,时间轴大致差不多,区别在于用于什么方面。以上时间轴使用QPainter绘制,通过鼠标等事件进行操作。
很多样式都是不同需求进行不同定制的。如果小伙伴有其他样式的时间轴需要的可以找我定制哈。

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页