Qml练习：进度圆环绘制

import QtQuick 2.9
import QtQuick.Window 2.9

Item {
    id: root
    width: 400
    height: 400

    Rectangle{
        id:rect
        width: 300
        height: width
        radius: width/2
        property int value:30  //取值0-100
        antialiasing: true
        anchors.centerIn: parent
        color: "gray"
        Text {
            id: ratio
            text: String("%1%").arg(rect.value)
            font{
                pointSize: 30
                family: "黑体"
            }
            color: "white"
            anchors.centerIn: parent
        }
        Canvas{
            id:canvas
            antialiasing: true
            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d")
                
                //绘图之前清除画布
                ctx.clearRect(0,0,width,height)

                ctx.strokeStyle = "aquamarine"
                ctx.lineWidth = 12
                ctx.beginPath()
                ctx.arc(rect.width/2,rect.height/2,rect.width/2-ctx.lineWidth,-Math.PI/2,-Math.PI/2+rect.value/100*2*Math.PI )
                ctx.stroke()

            }
        }

        focus: true
        Keys.onPressed: {
            switch(event.key)
            {
            case Qt.Key_Up:         //按方向键上，数值增加
                 if(rect.value<100)
                     rect.value+=5

                 break
            case Qt.Key_Down:     //按方向键下，数值减小
                if(rect.value>0)
                    rect.value-=5
                break

            }
            
			//重绘
            canvas.requestPaint()

        }
    }

}

来源：CSDN

作者：莫哥学编程

链接：https://blog.csdn.net/ssspppfff/article/details/103663171