一个基于 vue 框架使用 canvas 绘制的时间轴组件，可用于视频、录像播放或实时数据展示等业务。

组件使用纯原生的 canvas 绘图未使用第三库，所以组件体积很小； 同时相比于使用 div 方案需要频繁操作 Dom 性能上更高、体验更好。

组件可以在电脑、移动端自适应，无需额外的配置。

1.拖动或点击时间轴 在释放的时候可以获得时间数据；

2.设置时间点 通过 startMeddleTime 参数可以设置起点时间，可将设置的时间切换到时间轴的中间；

3.设置时间区域 通过 timeRange 参数可以指定录像时间段，时间轴只绘制这段时间内的刻度线，并且只能在这段时间里进行拖动；

4.设置区域标记 通过 markTime 参数可以对时间轴的某个或某几个区域进行标记，标记的区域可以自定义背景颜色和文本说明；

5.刻度缩放 时间轴刻度支持多级显示，可以通过鼠标滚轮或双指对刻度进行缩小放大；

6.自动播放 设置参数 isAutoPlay = true 可以开启自动播放，开启后时间轴将以 1s 的速度前进;

7.事件监听 可以绑定 change 事件来监听时间轴的时间变化和状态变化；

8.hover 显示时间 鼠标放在时间轴上移动可以显示时间；

9.自定义样式 可以设置 colors 参数对颜色自定义；

10.组件独立 可以在同一页面内使用多个时间轴组件互干扰;

11.时间轴绘制 通过 canvas 动态绘制刻度、录像段、时间点。

1.时间轴已组件化，可以在 vue 框架直接使用，甚至可做到无参使用； 2.所有代码开源，并且代码注释详细，文档使用说明和示例齐全； 3.API 操作灵活，可以灵活的适用各种应用场景和定制化的二次开发。

main.js:

在 script 中引用组件：

在 template 中使用组件：

或

在刚开始有考虑用div方案，后面使用起来发现每一次重绘就要操作上百个dom节点，性能很差，所以决定最后决定采用canvas来写时间轴。 以上就是本文的全部内容，希望对大家有所帮助，也希望大家多多支持。