一种基于Canvas绘制录像回放时间轴的方法技术

本发明专利技术公开一种基于Canvas绘制录像回放时间轴的方法，涉及前端开发技术领域；基于Canvas组件，利用参数start_timestamp开始时间和参数timecell各类型录像段数组进行时间轴初始化，利用Canvas组件根据不同终端绑定相应的移动指示事件，利用Canvas组件按照录像文件的播放速度调用组件内部方法：根据不同终端，利用相应绑定的移动指示事件，拖拽时间轴，和/或根据不同终端，利用相应绑定的移动指示事件，缩放时间轴，调整时间轴完成绘制。

【技术实现步骤摘要】
一种基于Canvas绘制录像回放时间轴的方法
本专利技术公开一种方法，涉及前端开发
，具体地是一种基于Canvas绘制录像回放时间轴的方法。
技术介绍
监控录像系统作为一种社会安全保障体系已在日常生活中被广泛应用，录像回放时间轴作为定位录像段的前端UI组件，其性能和使用方式对录像的查询速度和展示结果起着至关重要的作用。目前市面上常见的时间轴UI组件，多为JavaScript控制DOM元素模拟时间轴方案或者Flash绘制时间轴方案。JavaScript控制DOM元素模拟时间轴方案的弊端为浏览器渲染DOM元素的性能不佳，尤其在进行时间轴拖拽和变化精度的操作时，不停的销毁和生成DOM元素使浏览器渲染性能更差，DOM元素作为会阻塞网页渲染的资源会导致整个网页卡顿，影响用户体验；同时，DOM元素模拟时间轴在不同版本浏览器上还存在兼容性风险。Flash绘制时间轴方案能够解决DOM方案的渲染性能问题，但是Flash技术需要浏览器支持，目前主流浏览器默认不开启对Flash技术的支持，尤其是在移动端，从而限制了时间轴UI组件的适用场景；另外本文档来自技高网...

【技术保护点】
1.一种基于Canvas绘制录像回放时间轴的方法，其特征是基于Canvas组件，利用参数start_timestamp开始时间和参数timecell各类型录像段数组进行时间轴初始化，/n利用Canvas组件根据不同终端绑定相应的移动指示事件，/n利用Canvas组件按照录像文件的播放速度调用组件内部方法：/n根据不同终端，利用相应绑定的移动指示事件，拖拽时间轴，/n和/或根据不同终端，利用相应绑定的移动指示事件，缩放时间轴，/n调整时间轴完成绘制。/n

【技术特征摘要】
1.一种基于Canvas绘制录像回放时间轴的方法，其特征是基于Canvas组件，利用参数start_timestamp开始时间和参数timecell各类型录像段数组进行时间轴初始化，
利用Canvas组件根据不同终端绑定相应的移动指示事件，
利用Canvas组件按照录像文件的播放速度调用组件内部方法：
根据不同终端，利用相应绑定的移动指示事件，拖拽时间轴，
和/或根据不同终端，利用相应绑定的移动指示事件，缩放时间轴，
调整时间轴完成绘制。


2.根据权利要求1所述的一种基于Canvas绘制录像回放时间轴的方法，其特征是利用Canvas组件根据PC端绑定相应的移动指示事件：为组件绑定鼠标按下mousedown事件、鼠标移动mousemove事件、鼠标释放mouseup事件和鼠标滚轮mousewheel事件。


3.根据权利要求1所述的一种基于Canvas绘制录像回放时间轴的方法，其特征是利用Canvas组件根据移动端绑定相应的移动指示事件：为组件绑定手指接触屏幕touchstart事件、手指接触屏幕后移动touchmove事件、手指离开屏幕touchend事件和手指间缩放事件。


4.根据权利要求2所述的一种基于Canvas绘制录像回放时间轴的方法，其特征是利用Canvas组件根据PC端进行拖拽时间轴：通过绑定的相应的鼠标事件，触发鼠标按下时记录其屏幕坐标X轴值x1，按下状态的鼠标移动时记录其屏幕坐标X轴值x2，x2-x1的值若为正数则时间轴向右移动，移动距离为x2-x1的值，时间轴的当前时间修改为原时间-(移动距离/20*当前精度)；x2-x1的值若为负数则时间轴向左移动，移动距离为x1-x2的值，时间轴的当前时间修改为原时间+(移动距离/20*当前精度)。


5.根据权利要求3所述的一种基于Canvas绘制录像回放时间轴的方法，其特征是利用Canvas组件根据移...

【专利技术属性】
技术研发人员：张亮，尹萍，安晓博，高美容，林栋，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：山东;37