使用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