qt - QML Canvas.requestAnimationFrame 爆炸

Question

我正在尝试使用 QML Canvas.requestAnimationFrame 来绘制一些自定义动画。我预计所提供的回调每帧调用一次，大约每秒 60 次。我的代码是:

Canvas {
    id: canvas

    width: 600
    height: 600

    function draw() {
    }

    Component.onCompleted: {
        var i = 1;

        function drawFrame() {
            requestAnimationFrame(drawFrame)
            console.log("Frame callback: " + i++)
            draw()
        }

        drawFrame()
    }

    onPaint: {
        draw()
    }

}

我看到回调被调用的频率更高。计数器在几秒钟内达到 70000，之后应用程序变得完全无响应。

我做错了什么？

Answer 1

您的 drawFrame() 函数将自身作为渲染回调函数传递，您陷入了循环。您要么只想按需渲染，例如在用户输入后将资源保持在最低限度，要么您有一些更改每一帧的逻辑，或者您只需要连续渲染。

如果您想要基于时间的渲染，只需使用计时器:

import QtQuick 2.4

Canvas  {
    id: cvs
    width: 600; height: 600
    contextType: "2d"
    property real i : 0

    onPaint: {
        console.timeEnd("t")
        if (context) {
            context.clearRect (0, 0, width, height)
            context.fillRect(i, 50, 50, 50 + i)
        }
        console.time("t")
    }

    Timer {
        interval: 1
        repeat: true
        running: true

        onTriggered: {
            cvs.i = (cvs.i + 0.1) % cvs.width
            cvs.requestPaint()
        }
    }
}

编辑:

刚刚更新了代码:

onPaint 调用会与显示帧速率同步，即使计时器间隔设置为 1 毫秒(如运行上述示例时的日志所示)。 事实上，分配给 onTriggered 信号的整个 block 每毫秒执行一次，但 requestPaint() 确保同步渲染调用以获得最佳性能，就像 requestAnimationFrame() 适用于 HTML Canvas 。

显然，QML.Canvas 内的 requestAnimationFrame() 无法按预期工作，并且没有太多文档...

希望这有帮助!