項(xiàng)目中有一個(gè)界面是輸入密碼錯(cuò)誤時(shí)，進(jìn)行倒計(jì)時(shí)界面。由于項(xiàng)目時(shí)基于QML寫的，所以研究了下用Canvas畫倒計(jì)時(shí)界面：

項(xiàng)目中的界面：

我實(shí)現(xiàn)的：

上傳的gif圖，不會(huì)動(dòng)啊

實(shí)現(xiàn)的過程中走了許多彎路，試了多種方法組合和函數(shù)。如果項(xiàng)精準(zhǔn)控制，需要對(duì)以下函數(shù)有深刻認(rèn)識(shí)：

context.arc(x,y,r,sAngle,eAngle,counterclockwise); context.scale(scalewidth,scaleheight); context.translate(x,y); 需要對(duì)以上三個(gè)函數(shù)有清晰的認(rèn)識(shí)。繪圖關(guān)鍵代碼如下：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();}

?

總結(jié)

以上是生活随笔為你收集整理的Qml环形倒计时的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。