在畫布api中重繪功能

Question

我想在qml中使用畫布API（在html5中使用相同的一個）製作計時器。我需要每隔一秒左右重繪畫面。是否有任何可以更新的功能新加入參數的屏幕？ 例如我使用其中I指定時鐘弧的角度弧函數被繪製：

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)