在畫布api中重繪功能

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

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

在此，該角度將改變每一秒左右。

來源

2013-03-28 Parth Mody

不能在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的最佳設置可以讓您獲得最佳的渲染效果！

來源

2013-03-28 15:34:56 TheBootroo

使用Timer是強制刷新畫布組件的唯一方法？當條件改變時，畫布是否可以自動知道重新繪製，例如它被饋送的數據或觸摸輸入？ – johnbakers 2013-07-24 10:06:22

@OpenLearner你可以在你的畫布中爲你需要的每個值完全添加屬性，並添加onYourPropertyChanged：{canvas.requestPaint（）; } – TheBootroo 2013-07-24 13:30:20

你可以使用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)

來源

2013-03-28 03:25:26 Jarrod

在畫布api中重繪功能

回答

相關問題