使用canvas編寫時間軸外掛程式

這個外掛程式，原外掛程式中是使用原生的js 繪製dom節點來顯示時間軸，後面使用起來發現每一次重繪就要操作上百個dom節點，效能很差，所以決定採用canvas來重寫時間軸。

1. 繪製時間軸：

上面包括刻度、錄影段、時間點

2. 點選/拖動時間軸：

可以返回釋放的時間點，控制台有列印值

3. 放大縮小：

在時間軸上滾動滑鼠滾輪可以放大縮小時間軸

4. 設定時間點：

demo介面上有乙個settime 按鈕可以設定 "2018-03-02 15:00:00" 這樣格式的時間讓時間軸的中間跳到這個點

6. 改變錄影段：

demo介面上是有乙個togglecell這個按鈕進行切換成另一段錄影段

滑鼠放在時間軸上可以顯示時間

因為整篇主要是說canvas繪製，所以這裡就簡單說一下我使用到的canvas相關方法有哪些。

時間軸主要是由刻度、刻度時間、長方形錄影段

刻度：

主要是add_graduations 這個方法，在這個方法中繪製是呼叫了drawline方法，其實就是繪製一條線，如下：

timeslider.prototype.drawline = function(beginx,beginy,endx,endy,color,width)

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方法

1、因為裡面的刻度和錄影段的繪製都是需要x軸距離，即距離左邊的距離，所以這裡可以通過

距離=開始的偏移距離+格數*px/格

這樣的思想乙個個值算出來，這裡需要說明的一點是開始的偏移距離是因為最左邊的那乙個刻度不一定會和左側邊界重合，可能會向右一些，所以這一段距離需要算出來，通過下面得出

var ms_offset = _this.ms_to_next_step(start_timestamp,min_per_step*60*1000);
/** * 左側開始時間的偏移，返回單位ms
* @param  timestamp 
* @param  step 
*/timeslider.prototype.ms_to_next_step = function(timestamp, step)

2、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

使用canvas編寫時間軸外掛程式

時間軸外掛程式

mysql 時間軸使用MySQL計算時間軸的變化

jquery垂直時間軸外掛程式

使用canvas編寫時間軸外掛程式

時間軸外掛程式

mysql 時間軸 使用MySQL計算時間軸的變化

jquery垂直時間軸 外掛程式

相關推薦

mysql 時間軸使用MySQL計算時間軸的變化

jquery垂直時間軸外掛程式