项目中有一个界面是输入密码错误时,进行倒计时界面。由于项目时基于QML写的,所以研究了下用Canvas画倒计时界面:
项目中的界面:
我实现的:
上传的gif图,不会动啊
实现的过程中走了许多弯路,试了多种方法组合和函数。如果项精准控制,需要对以下函数有深刻认识:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
context.scale(scalewidth,scaleheight);
context.translate(x,y);
需要对以上三个函数有清晰的认识。
绘图关键代码如下:
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
let x = this.x + this.width / 2;
ctx.translate(x, 0);
ctx.scale(-1, 1);
ctx.translate(-x, 0);
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = “darkblue”;
ctx.arc(canvas.centerWidth,
canvas.centerHeight,
canvas.radius,
angle + canvas.angle,
angle + 2*Math.PI ,
false);
ctx.stroke();
ctx.restore();
}