QML圆形进度条并且给进度条的头部加上图片

公司UI真服了，进度条就进度条搞啥花里胡哨。非得在进度条得头部加张图，关键设计的进度条还是圆形的。想的我头发都掉没了😂
一共尝试了2种方案；
方案一:QWidget中的painter中绘制，一个大圆和一个小圆中间画一个半径和大圆一样的扇形，最后绘制一个Image，把它放在合适的位置，然后每次更新的时候计算它的坐标。直接计算的话位置多少还是有些偏差的，所以我们可以在将它放在合适的位置后直接旋转坐标系(绿色又健康👌)
方案二:QML中绘制,内圆是一个Rectangle,外圆也是一个Rectangle,进度条则是在Canvas中绘制，图片则是在一个Rectangle中加载的，通过给几个Rectangle不同的z值(屏幕中的深度),来达到我们想要的效果。当然最关键的还是Image如何跟着进度条头部移动。这里的思想和第一种相似，但这次我们不是旋转坐标系，而是直接旋转Image所在的Rectangle。通过它来达到我们想要的效果；
方案二代码如下，方案一就不发了✨记得把图片换成自己的哦，么么哒

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

Window
{
    id:control

    height:480
    width:360
    visible: true

    property string tipsText : ""
    property int value: 0
    property color processBarColor:"#202020" //进度条颜色
    property color backgroundColor:"#800000" //背景颜色
    property color insideBackgroundColor: "#007fff"//里面背景颜色
    property int processBarWidth: 20;//进度条宽度
    property string pathImage : "qrc:/image/icon-add-mergebot-type-todo.png"

    Rectangle
    {
        width: Math.min(parent.width,parent.height)
        height: width
        color:backgroundColor
        radius:height
        opacity: 1
        z:70
        anchors.centerIn: parent
        antialiasing: true
        Canvas
        {
            id:canvas
            anchors.fill: parent
            clip: true
            onPaint:
            {
                var ctx=getContext("2d")
                ctx.clearRect(0,0,width,height)
                ctx.beginPath()
                ctx.strokeStyle = processBarColor
                ctx.lineWidth = processBarWidth
                ctx.arc(width/2,height/2,width/2-processBarWidth/2,270*Math.PI/180,(value+270)*Math.PI/180)
                ctx.stroke()
            }
        }
    }

    Rectangle
    {
        width: Math.min(parent.width,parent.height)-40
        height: width
        anchors.centerIn: parent
        radius: height
        z:200
        color:insideBackgroundColor

        Label
        {
            width: 100
            height: 30
            anchors.centerIn: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            color: "white"
            text:"进度"+value+"%"

        }
    }


    Rectangle
    {
        width: Math.min(parent.width,parent.height)
        height: width
        radius:width
        color:"white"
        opacity: 0.6
        rotation: value
        anchors.centerIn: parent
        z:80
        Rectangle
        {
            id:_img
            width:20
            height:20
            x:parent.width/2-5
            y:0
            radius: 20
            opacity: 1
            Image {
                anchors.fill: parent
                source: pathImage
            }
        }
    }



    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            if(value<=360)
            {
                value+=1
                canvas.requestPaint()
            }
            else
            {

            }
        }
    }

}