Qml环形倒计时

项目中有一个界面是输入密码错误时，进行倒计时界面。由于项目时基于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();
        }

 

来源：CSDN

作者：刘一儿

链接：https://blog.csdn.net/lsyrhz/article/details/103605792