繪制多條路徑時 react-native-canvas 的性能優化

Question

我想在我的 React Native 應用程序中鏡像模擬段顯示。 段顯示相當復雜，它由 100 多個不同的段組成。 它包含三個 7 段數字顯示和一個包含 20 個元素的進度條。 其余的是自定義形狀和符號，提供有關它所連接的機器的當前狀態的信息。 我對 HTML 畫布有一些經驗，發現了 React Native 模塊 react-native-canvas 並想嘗試一下。 但是，與我可以在網絡瀏覽器中使用的 HTML 畫布相比，在 react-native-canvas 上繪圖似乎相當慢。

這是我所做的：

1. 我在我的組件中導入模塊：

import Canvas, {Image as CanvasImage, Path2D, ImageData} from 'react-native-canvas';

2. 向我的渲染函數添加一個畫布元素：

<Canvas ref={this.handleCanvas}/>

3. 存儲對畫布的引用並設置其大小：

handleCanvas = (canvas) => {
    if (this.myCanvas === null && canvas !== null){
      canvas.width = 250;
      canvas.height = 250;
      this.myCanvas = canvas;
    }
  }

4. 然后我可以為每個段調用一個繪制二維路徑的“繪制”函數：

draw(ctx){
  ctx.save();
  ctx.strokeStyle="#000000";
  ctx.lineWidth=2;
  ctx.lineJoin="round";
  ctx.font="   10px sans-serif";
  ctx.beginPath();
  ctx.moveTo(158.108112514019,24.324327290058136);
  ctx.lineTo(159.45946389436722,24.324327290058136);
  ctx.lineTo(160.13513958454132,25.67567867040634);
  ...
  ctx.lineTo(162.16216665506363,25.00000298023224);
  ctx.fill("nonzero");
  ctx.stroke();
  ctx.restore();
}

我得到這樣的上下文： var ctx = this.myCanvas.getContext('2d');

我制作了一個包含 13 個部分的原型。 每個段有大約 50 個節點，我一次繪制所有 13 個段。 在我的 React Native 應用程序中，這幾乎需要一秒鍾的時間來繪制，這太慢了（還有 90 個部分我還沒有渲染......）。 如果我在 Google Chrome 的 HTML 畫布上繪制相同的路徑，只需要 2-5 毫秒。

有沒有人有想法，我如何提高性能？ 還是有另一個庫對我的目的來說性能更好？`

提前致謝！

Answer 1

Iddans 的回答是正確的，因為我無法發布我們如何准確解決問題的詳細解決方案作為對他的回答的評論，所以我自己發布了一個新答案。

正如 Iddan 所說，正確的解決方案確實是盡量減少發送到畫布的指令數量。 我們改變了我的問題的第 4 點。 我們沒有直接使用ctx.lineTo(...)語句繪制路徑，而是將所有 SVG 路徑提取為字符串並將它們存儲在一個數組中：

const svgPaths = [
   'M713.33,497.34a38.67 ... ',
   ...
]

對於每個渲染周期，我們決定要渲染所有 SVG 路徑的哪個子集並將它們存儲在一個新數組中，然后我們創建所有所需 svg 路徑的單個 Path2D 對象

const svgPathsSubset = [svgPaths[1], svgPaths[7], ... ]
const pathToRender = new Path2D(this.myCanvas, svgPathsSubset)
const ctx = this.myCanvas.getContext('2d')
ctx.fill(pathToRender)

這非常快，只需幾毫秒。

Answer 2

感謝您發布如此詳細的問題。 與 HTML 畫布相比，React Native Canvas 相當慢，因為每條指令都被傳送到 WebView。 我能想到的一種提高性能的潛在方法是使用Path2D，因為對象在呈現之前包含多個指令。 您可以嘗試一下並檢查它是否提高了性能？