是否可以在 Konva.js 中测量当前的 FPS？

编程问答 2022-08-22

问题描述

我想实现以下逻辑（这可能听起来很奇怪，但对我来说感觉是个好主意）。

几个月前我问了 this 个问题，pixelRatio 的解决方案似乎仍然很好。但是 iPhone 和一些 Android 设备的性能比我的好得多，所以我想让它们以更好的质量渲染我的场景。这个想法是，我想要一个自适应的 pixelRatio：确定当前的 FPS，如果它足够低，用较低的 pixelRatio 重新渲染场景。

我没有在项目的任何地方明确使用 requestAnimationFrame，所以我显然不能使用 this approach。我想知道 Konva 是否有任何用于此目的的 API - 或者我可以附加一些挂钩/事件以测量 FPS。

或者这是一个坏主意，我应该放弃它？

解决方法

Konva 本身没有直接的 API 来获取当前的 FPS。但是您可以使用 timeDiff 中的 Konva.Animation 参数来了解当前的 FPS。 fps = 1000 / timeDiff。

const anim = new Konva.Animation(f => {
  if (f.timeDiff > 60) {
    // time for frame is too big,decrease quality
    if (layer.getCanvas().getPixelRatio() > 1) {
      layer.getCanvas().setPixelRatio(0.2);
    }
  } else {
    // time for frame is too small,increase quality
    if (layer.getCanvas().getPixelRatio() < 1) {
      layer.getCanvas().setPixelRatio(2);
    }
  }
},[layer]);

演示：https://jsbin.com/regacabogo/3/edit?html,output

timeDiff 每帧不一致。并且可能跳很多，所以你可能需要写一个“平滑”的算法。例如，仅当连续许多帧的 FPS 太低/太高时才更改质量。

此外，您可以使用 requestAnimationFrame API 手动计算 FPS。

animationanimationanimationjavascriptkonvakonvajsperformanceperformanceperformance