在Vue中使用WebSocket+HighCharts+Canvas實現高性能的頻譜瀑布圖

做者：codexu

---

廢話很少說，先上成品圖：

再來個迷你動圖：

可能不少同窗不知道頻譜圖和瀑布圖，其實我也不懂...可是我們前端就是負責把數據按照規則顯示出來就好（上方折線圖爲頻譜圖，下方那一坨爲瀑布圖）。

技術選型

框架：Vue(這並不重要，反正我也不會多說這塊)

數據傳輸：WebSocket

頻譜圖：HighCharts

瀑布圖：Canvas

• 爲何使用 WebSocket ？

由於須要服務器實時傳輸數據，要求達到30幀，每幀動畫由 1024 個點組成，確定要比 Ajax 輪詢舒服的多，並且這個項目對於瀏覽器兼容沒什麼要求。

• 爲何使用 HighCharts 繪製頻譜圖?

作了個測試，HighCharts 與 ECharts，雖說 canvas 的性能要比 svg 強，但同時渲染以爲 HighCharts 更加流暢（HighCharts 須要付費）。

• 瀑布圖爲何使用 Canvas ？

雖說用數據可視化圖表庫很方便，可是考慮到此項目苛刻的性能要求，使用相似瀑布圖的只有大型熱力圖：

用熱力圖作，請放心，不會卡成 PPT，瀏覽器5秒後準時直接崩潰。

組件功能拆分

整個組件拆分爲三部分：

• 父組件：負責 WebSocket 與服務器實時通信、處理二進制數據、控制渲染頻率、控制開始和暫停、刷新組件。

• 子組件 > 頻譜圖(HighCharts)：提供 addData 方法，獲取數據即渲染一幀，提供觸發縮放事件，發送給父組件。

• 子組件 > 瀑布圖(Canvas)：與頻譜圖同樣提供 addData 方法，頻譜圖發生縮放事件後，對應其選取的位置進行縮放。

父組件

WebSocket 連接服務器

由於操做並非不少，直接使用原生方式：

this.socket = new WebSocket('ws://192.168.2.250:8100/socket')
this.socket.onopen = () => {...}
this.socket.onclose = () => {...}
複製代碼

與後端對接好發送的指令，這裏咱們定義了三個：

// 開始獲取數據
this.socket.send('start')
// 暫停獲取數據
this.socket.send('pause')
// 恢復獲取數據
this.socket.send('resume')
複製代碼

監聽 onmessage 事件：

this.socket.onmessage = (event) => {
  const reader = new FileReader()
  reader.readAsArrayBuffer(event.data)
  reader.onload = e => {
    if (e.target.readyState === FileReader.DONE) {
      // 處理二進制數據
    }
  }
}
複製代碼

處理二進制數據

這塊原本想用大篇幅來寫，可是前幾天看到《爲何視頻網站的視頻連接地址是blob？》，寫的很好，自愧不如，請你們轉移看懂這塊，別忘了再回來。

控制渲染頻率

服務器這邊大概一秒鐘發送過來 400 條左右的數據，每秒400幀確定是不現實了，直接致使丟幀。

解決辦法：創建數組保存數據，每次渲染一幀則刪掉此條數據，當少於100條時發送 resume 繼續獲取，當超過400條時 發送 pause 暫停獲取。

以服務器這邊的發送頻率來講，會使 cpu 使用率超過100%，獲取時會出現一點點卡頓，不過還能接受，畢竟獲取一次能夠渲染好幾秒鐘。

this.renderInterval = setInterval(() => {
  if (this.data.length <= 100 && this.socketPause === true) {
    this.socket.send('resume')
    this.socketPause = false
  }
  if (this.data.length >= 400 && this.socketPause === false) {
    this.socket.send('pause')
    this.socketPause = true
  }
  if (this.data.length <= 0) return
  const result = this.data[0]
  this.$refs.frequency.addData(result.data)
  this.$refs.waterFall.addData(result.data.map(item => item[1]))
  this.data.shift()
}, this.refreshInterval)
複製代碼

使用 setInterval 定時渲染還有個好處就是能夠控制渲染頻率，注意組件右上角的拖動條，這樣能夠在低配電腦上下降渲染頻率。

頻譜圖

HighCharts 與 ECharts 配置項上有些差別，不過都是配置的問題，看看文檔，很簡單，記得關閉全部動畫。

addData()

this.chart.series[0].setData(data, true, false)
複製代碼

父組件能夠經過 $ref.addData() 觸發渲染一幀

縮放

在配置中 chart.zoomType 設置爲 'x'，設置爲 X 軸選擇縮放。

chart.events.selection 配置選擇事件：

selection (event) {
  const pointWidth = (this.xAxisMax - this.xAxisMin) / 1024
  const ponitStart = Math.floor((event.xAxis[0].min - this.xAxisMin) / pointWidth)
  const ponitEnd = Math.floor((event.xAxis[0].max - this.xAxisMin) / pointWidth)
  this.$emit('frequencySelect', [ponitStart, ponitEnd])
},
複製代碼

向父組件發送已選取的點，再經過父組件傳遞給瀑布圖組件。

瀑布圖

這裏由於性能緣由脫離了某些庫，不少小夥伴到這裏就不知該如何去作了，這裏是本篇文章的重點。

先了解幾個概念，不少人接觸過 Canvas，可是這幾個估計沒怎麼注意過（像素操做）：

• createImageData()
• putImageData()
• drawImage() 這個應該都知道

先建立兩個畫布，一個用於顯示總體效果（this.canvas），另外一個保存已生成的圖像（this.waterFallDom，不會插入在 dom 上）。

this.canvas = document.createElement('canvas')
this.ctx = this.canvas.getContext('2d')
this.waterFallDom = document.createElement('canvas')
this.waterFallCtx = this.waterFallDom.getContext('2d')
複製代碼

createImageData

createImageData(width,height) 方法建立新的空白 ImageData 對象，兩個參數，設置圖像寬高，這裏項目需求一共 1024 個點：

const imageData = this.waterFallCtx.createImageData(data.length, 1)
複製代碼

這時生成了一張 1024 * 1 的空白圖像，咱們繼續要對每個像素點進行操做上色：

for (let i = 0; i < imageData.data.length; i += 4) {
  const cindex = this.squeeze(data[i / 4], 0, 150)
  const color = this.colormap[cindex]
  imageData.data[i + 0] = color[0]
  imageData.data[i + 1] = color[1]
  imageData.data[i + 2] = color[2]
  imageData.data[i + 3] = 255
}
return imageData
複製代碼

imageData.data 是一個數組，每四個值繪製一個像素點，分別對應：

• R - 紅色 (0-255)
• G - 綠色 (0-255)
• B - 藍色 (0-255)
• A - alpha 通道 (0-255; 0 是透明的，255 是徹底可見的)

this.squeeze是根據數據計算出 colormap 中對應的點，這個很少說：

squeeze (data, outMin, outMax) {
  if (data <= this.minDb) {
    return outMin
  } else if (data >= this.maxDb) {
    return outMax
  } else {
    return Math.round((data - this.minDb) / (this.maxDb - this.minDb) * outMax)
  }
}
複製代碼

colormap 是一個二維數組，每一個值表明[r, g, b, a]，這裏我生成了150個顏色，是個漸變色，能夠看下圖例。

• 如何生成 colormap ？

若是你打算手寫也沒什麼問題，就是手疼點。這裏推薦使用 npm 安裝 colormap

this.colormap = colormap({
  colormap: 'jet',
  nshades: 150,
  format: 'rba',
  alpha: 1
})
複製代碼

提供了多種配色，具體請參考文檔。

到此，咱們就生成了一張 具備顏色 1024 * 1 的圖像，固然它仍是個圖像對象。

putImageData

putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight) 將圖像數據繪製到畫布上：

• imgData: 規定要放回畫布的 ImageData 對象。
• x: ImageData 對象左上角的 x 座標，以像素計。
• y: ImageData 對象左上角的 y 座標，以像素計。
• dirtyX: 可選。水平值（x），以像素計，在畫布上放置圖像的位置。
• dirtyY: 可選。水平值（y），以像素計，在畫布上放置圖像的位置。
• dirtyWidth: 可選。在畫布上繪製圖像所使用的寬度。
• dirtyHeight: 可選。在畫布上繪製圖像所使用的高度。

this.waterFallCtx.putImageData(imageData, 0, 0)
複製代碼

drawImage

這個你們比較熟悉，就是把圖像繪製在畫布中，這時咱們就能夠把 this.waterFallCtx 繪製到 this.ctx 上了。

drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

• img: 規定要使用的圖像、畫布或視頻。
• sx: 可選。開始剪切的 x 座標位置。
• sy: 可選。開始剪切的 y 座標位置。
• swidth: 可選。被剪切圖像的寬度。
• sheight: 可選。被剪切圖像的高度。
• x: 在畫布上放置圖像的 x 座標位置。
• y: 在畫布上放置圖像的 y 座標位置。
• width: 可選。要使用的圖像的寬度。（伸展或縮小圖像）
• height: 可選。要使用的圖像的高度。（伸展或縮小圖像）

this.ctx.drawImage(this.waterFallCtx.canvas,0, 0, 1024, 1, 0, 0, width, height)
複製代碼

這裏 sx、sy 能夠配合頻譜圖作縮放的操做。

width、height 能夠被伸縮或縮小，顯示效果比較不錯，好比只有兩個像素點的圖像，被拉伸到 1000 個像素時並非兩個顏色一人一半，而是一條完美的漸變。

現實動態的瀑布圖

上述咱們已經把第一行圖像繪製到畫布中，此時咱們可能經過 WebSockt 已經拿到了幾百條數據，每新增一行圖像，前一行圖像就要下一一行：

// 將已生成的圖像向下移動一個像素
this.waterFallCtx.drawImage(this.waterFallCtx.canvas,
  0, 0, 1024, 300 - 1,
  0, 1, 1024, 300 - 1)
複製代碼

300 是指一共保存 300 行圖像，這些數據都不該該是固定的，應該提早設置好，這裏爲了方便演示。

經過調用自身的圖像，並從新繪製到本身向下偏移 y 軸 1 像素，高度 -1 的圖像。

這樣咱們每添加一條數據，就會多一行新圖像在最上方，已生成的圖像向下移動了一個像素，自此咱們的圖像就動起來了。

實現縮放

頻譜圖已經作好縮放操做，並把起始點和結束點傳遞給父組件，再有父組件傳遞給瀑布圖組件，動態修改 drawImage 的剪切屬性。

結語

既然是使用 Vue 作的這個項目，我打算抽空作成 Vue 插件，作更多的可配置項。

我曾一度以爲這是個不能能完成的項目，是本身太年輕了，公司的大佬提點了幾句，就作出來了，在這裏分享給你們，不論多難的項目總會有解決的辦法。