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();
        }