在画布api中重绘功能
问题描述:
我想在qml中使用画布API(在html5中使用相同的一个)制作计时器。我需要每隔一秒左右重绘画面。是否有任何可以更新的功能新加入参数的屏幕? 例如我使用其中I指定时钟弧的角度弧函数被绘制:在画布api中重绘功能
ctx.arc(150, 150, 95, 0,1.57,false);
在此,该角度将改变每一秒左右。
答
不能在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的最佳设置可以让您获得最佳的渲染效果!
答
你可以使用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)
使用Timer是强制刷新画布组件的唯一方法?当条件改变时,画布是否可以自动知道重新绘制,例如它被馈送的数据或触摸输入? – johnbakers 2013-07-24 10:06:22
@OpenLearner你可以在你的画布中为你需要的每个值完全添加属性,并添加onYourPropertyChanged:{canvas.requestPaint(); } – TheBootroo 2013-07-24 13:30:20