绘制多条路径时 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，因为对象在呈现之前包含多个指令。 您可以尝试一下并检查它是否提高了性能？