使用canvas编写时间轴插件

使用canvas编写时间轴插件

背景

项目中有一个视频广场的功能，须要一个时间轴相似视频播放中进度条功能同样显示录像状况，而且能够点击、拖动、放大缩小展现时间轴，获取到时间轴的某个时间。原来的时间轴是使用了timeslider 这个插件，原插件中是使用原生的js 绘制dom节点来显示时间轴，后面使用起来发现每一次重绘就要操做上百个dom节点，性能不好，因此决定采用canvas来重写时间轴。

效果以下

实现的功能

1. 绘制时间轴：
上面包括刻度、录像段、时间点

2. 点击/拖动时间轴：
能够返回释放的时间点，控制台有打印值

3. 放大缩小：
在时间轴上滚动鼠标滚轮能够放大缩小时间轴

4. 设置时间点：
demo界面上有一个setTime 按钮能够设置 "2018-03-02 15:00:00" 这样格式的时间让时间轴的中间跳到这个点

5. 显示播放点：
中间是播放点，由于原来项目是要求直播和回放在同一时间轴显示，因此以中间来划分

6. 改变录像段：
demo界面上是有一个toggleCell这个按钮进行切换成另外一段录像段

7. hover显示时间：
鼠标放在时间轴上能够显示时间

代码说明

由于整篇主要是说canvas绘制，因此这里就简单说一下我使用到的canvas相关方法有哪些。
时间轴主要是由刻度、刻度时间、长方形录像段

刻度：
主要是add_graduations 这个方法，在这个方法中绘制是调用了drawLine方法，其实就是绘制一条线，以下：

TimeSlider.prototype.drawLine = function(beginX,beginY,endX,endY,color,width){

this.ctx.beginPath();

this.ctx.moveTo(beginX,beginY);

this.ctx.lineTo(endX,endY);

this.ctx.strokeStyle = color;

this.ctx.lineWidth = width;

this.ctx.stroke();

}

刻度时间：

this.ctx.fillText(middle_date,graduation_left-20,30);

this.ctx.fillStyle = "rgba(151,158,167,1)";

录像段：
主要是add_cells这个方法，在这个方法中绘制是调用了draw_cell方法，其实就是绘制一个长方形，以下：

this.ctx.fillStyle = cell.style.background;

this.ctx.fillRect(beginX,0,cell_width,15);

其余基本上若是要绘制线例如中间红线、总体的框架线、hover的线都是调用drawLine方法

遇到的困难

一、由于里面的刻度和录像段的绘制都是须要x轴距离，即距离左边的距离，因此这里能够经过

距离=开始的偏移距离+格数*px/格

这样的思想一个个值算出来，这里须要说明的一点是开始的偏移距离是由于最左边的那一个刻度不必定会和左侧边界重合，可能会向右一些，因此这一段距离须要算出来，经过下面得出

 
 
 
 
 

  
  
  
  
 
 
 
 
 


var ms_offset = _this.ms_to_next_step(start_timestamp,min_per_step601000);

/**
左侧开始时间的偏移，返回单位ms
 
@param {*} timestamp
 
@param {} step
 /
 TimeSlider.prototype.ms_to_next_step = function(timestamp, step) {
 var remainder = timestamp % step;
 return remainder ? step - remainder : 0;
 }
 
 

二、canvas绑定事件是经过addEventListener这个方法实现，由于这个时间轴没进行一次操做都是重绘canvas因此原来的绑定事件方法add_events都写在重绘方法里致使事件累加，浏览器内存爆了，而后就卡顿了。后面发现只要canvas初始化第一次绑定以后，其余的重绘不须要再绑定了，以此在init方法中会看到redrawFlag这个变量，是判断是否添加事件的，只有初始化须要添加

最后说明

最后说一下这个插件里面如今总共有两个版本，带有1的是封装以后的版本，没有带1是最初简单版能够直接写入业务文件调用的。另外，由于这只是个demo，因此界面上setTime这个按钮的功能并无对输入框时间作格式限制，只能输入“2018-03-02 15:00:00”这样的才有效，其他格式会出现NAN-NAN-NAN NAN：NAN：NAN的bug