作者：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 的剪下屬性。