Question

我正在尝试使用canvas API（在html5中使用的同一个）在qml中创建一个计时器。我需要每隔一秒左右重绘一次屏幕。是否有任何可以用新馈送更新屏幕的功能参数？例如，我使用的是弧函数，其中我指定了绘制时钟弧的角度：

ctx.arc(150, 150, 95, 0,1.57,false);

在此，角度将每隔一秒左右变化。

Answer 1

你不能在QML中使用setTimeout()，它只在JS中用于浏览器，在Qml中你必须认为声明：

导入QtQuick 2.0

Canvas {
    id: canvas;
    width: 360;
    height: 360;
    contextType: "2d";
    renderStrategy: Canvas.Threaded;
    renderTarget: Canvas.Image;
    antialiasing: true;
    smooth: true;

    onPaint: {
        if (context) {
            context.clearRect (0, 0, width, height);
            context.beginPath ();
            context.moveTo (width / 2, height / 2);
            context.arc (width / 2,
                         height / 2,
                         50,
                         0,
                         angle * Math.PI / 180,
                         false);
            context.closePath ();
            context.fillStyle = "red";
            context.fill ();
        }
    }

    property real angle : 0;

    Timer {
        interval: 1000;
        repeat: true;
        running: true;
        onTriggered: {
            // update your angle property as you want
            canvas.angle = (canvas.angle < 360 ? canvas.angle +6 : 0);
            // repaint
            canvas.requestPaint ();
        }
    }

}

我冒昧地为Canvas设置最佳设置，让您拥有最佳渲染效果！

Answer 2

您可以使用setTimeOut？

setTimeout(update, 1000);

function update() {
    ctx.clearRect(0, 0, width, height);
    ctx.arc(150, 150, 95, 0,1.57,false);
}

如果你需要传入变量，你需要使用匿名函数，这篇文章在这篇文章中有解释：How can I pass a parameter to a setTimeout() callback?或者参见下面的代码示例。

setTimeout(function() {
    update(topicId);
}, 1000)

canvas api中的重绘功能

2 个答案: