qml 实现圆形图片与圆形进度条的结合

Canvas 这个教程在蚂蚁部落里有很多实例，看了那里的API，才茅塞顿开的。圆形图片，周边有一圈进度条，随着音乐的播放，进度条能够一点一点的描画。这里把描画和圆形图片结合在一起，作为一个控件。外层调用的时候，需要启动timer，然后，出入参数就可以用了。

自定义Circular_img.qml

import QtQuick 2.0
import QtGraphicalEffects 1.0


    Rectangle {
            property url cuted_background
            property int background_width
            property int background_height
            property int arcWidth
            property color arcColor
            property color arcBackgroundColor
            property real  progress: 0

            id: img
            anchors.centerIn: parent
             background_width
            height: background_width
            radius: width/2
            color: "transparent"
            Image {
                id: _image
                smooth: true
                visible: false
                anchors.fill: parent
                source: cuted_background
                sourceSize: Qt.size(parent.size, parent.size)
                antialiasing: true
            }
            Rectangle {
                id: _mask
                color: "black"
                anchors.fill: parent
                radius: width/2
                visible: false
                antialiasing: true
                smooth: true
            }
            OpacityMask {
                id:mask_image
                anchors.fill: _image
                source: _image
                maskSource: _mask
                visible: true
                antialiasing: true
            }

            Canvas{
                id: canvas
                anchors.centerIn: mask_image
                 2*background_width + arcWidth
                height: 2*background_height + arcWidth
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.clearRect(0,0,canvas.width,canvas.height)
                    ctx.beginPath()
                    ctx.strokeStyle = arcBackgroundColor
                    ctx.lineWidth = arcWidth
                    ctx.arc(canvas.width/2,canvas.height/2,background_width/2,0,Math.PI*2,false)
                    ctx.stroke()

                    var r = progress*Math.PI/180
                    ctx.beginPath()
                    ctx.strokeStyle = arcColor
                    ctx.lineWidth = arcWidth

                    ctx.arc(canvas.width/2,canvas.height/2,background_width/2,0-90*Math.PI/180,r-90*Math.PI/180,false)
                    ctx.stroke()
                }

            }

        }

主函数调用：

import QtQuick 2.9
import QtQuick.Window 2.2


Window {
    visible: true
     640
    height: 480
    title: qsTr("Hello World")

    Circular_img{
        id:circular_img
        cuted_background:"./play_history_default.png"
        background_100
        background_height:100
        progress: 300
        arcWidth:2
        arcColor: "#148014"
        arcBackgroundColor: "#AAAAAA"
    }
}

效果图：