绘制许多路径时，react-native画布的性能优化

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. 然后，我可以为每个段调用绘制2D路径的“绘制”函数：

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毫秒。

有人有一个主意，我该如何改善性能？还是有另一个对我而言性能更高的库？

提前感谢！

我想在我的React Native应用程序中镜像模拟段显示。段显示非常复杂，它包含100多个不同的段。它包含三个7段显示器，用于...

Answer 1

感谢您发布如此详细的问题。由于将每条指令传递到WebView，因此与HTML画布相比，React Native Canvas相当慢。我可以想到的一种提高性能的潜在方法是使用Path2D，因为对象在呈现之前会持有多条指令。您可以尝试一下并检查它是否提高了性能吗？