摘要：水平值，以像素計，在畫布上放置圖像的位置。規定要使用的圖像畫布或視頻。要使用的圖像的高度。實現縮放頻譜圖已經做好縮放操作，并把起始點和結束點傳遞給父組件，再有父組件傳遞給瀑布圖組件，動態修改的剪切屬性。

作者：codexu

_

廢話不多說，先上成品圖：

再來個迷你動圖：

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

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

數據傳輸：WebSocket

頻譜圖：HighCharts

瀑布圖：Canvas

為什么使用 WebSocket ？

因為需要服務器實時傳輸數據，要求達到30幀，每幀動畫由 1024 個點組成，肯定要比 Ajax 輪詢舒服的多，而且這個項目對于瀏覽器兼容沒什么要求。

為什么使用 HighCharts 繪制頻譜圖?

做了個測試，HighCharts 與 ECharts，雖然說 canvas 的性能要比 svg 強，但同時渲染覺得 HighCharts 更加流暢（HighCharts 需要付費）。

瀑布圖為什么使用 Canvas ？

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

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

整個組件拆分為三部分：

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

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

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

因為操作并不是很多，直接使用原生方式：

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 配置項上有些差異，不過都是配置的問題，看看文檔，很簡單，記得關閉所有動畫。

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(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(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)

這個大家比較熟悉，就是把圖像繪制在畫布中，這時我們就可以把 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 插件，做更多的可配置項。

我曾一度覺得這是個不能能完成的項目，是自己太年輕了，公司的大佬提點了幾句，就做出來了，在這里分享給大家，不論多難的項目總會有解決的辦法。