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

Question

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

几个月前我问了问题，pixelRatio的解决方案看起来还不错。但是 iPhone 和一些 Android 设备的性能比我的好得多，所以我想让它们以更好的质量渲染我的场景。我的想法是，我想要一个自适应的 pixelRatio：确定当前的 FPS，如果它足够低，则用较低的 pixelRatio.

再次重新渲染场景

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

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

Answer 1

Konva 本身没有直接 API 获取当前 FPS。但是您可以使用 Konva.Animation 中的 timeDiff 参数来了解当前的 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,js,output

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

另外，您可以使用requestAnimationFrameAPI手动计算FPS。

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

Is it possible to measure the current FPS in Konva.js?

javascript

performance

animation

konvajs

konva