使用canvas实现时间轴上滑块的各种常用操作(仅供参考)

一、简介

使用canvas,模拟绘制时间轴区域,有时间刻度标尺,时间轴区域上会有多行,每行都有一个滑块。

1、时间刻度标尺可以拖动,会自动对齐整数点秒数,最小步数为0.1秒。

2、滑块可以自由拖动,当滑块处于选中状态时,左右两边会出现可拖动的按钮,用于拉伸宽度。

3、滑块之间可以自由拖动交换位置。

4、滑块与滑块之间对齐时会出现对齐虚线,滑块与刻度标尺对齐时,刻度标尺会变色用于提醒用户此时已对齐。

5、当滑块拉伸到最右侧区域时,右侧空间不足时,会自动增加右侧空间区域。而当做右侧滑块的位置往左移动时,如果出现右侧空间区域过大,则会自动减少右侧空间区域,始终保持右侧空间留白区域是预设的宽度。

使用canvas实现时间轴上滑块的各种常用操作(仅供参考)_第1张图片

 

二、案例代码










 

 

你可能感兴趣的:(JavaScript,HTML5,Vue,html5,前端,html,javascript)