Qml练习：进度圆环绘制

「已注销」

于 2019-12-23 12:08:03 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Qt

本文链接：https://blog.youkuaiyun.com/ssspppfff/article/details/103663171

Qt 专栏收录该内容

24 篇文章

订阅专栏

本文通过Qml详细介绍了如何创建一个进度圆环，涵盖了从基础元素设置到动态更新进度值的过程，帮助读者掌握Qml在图形界面设计上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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

        }
    }

}