自定义圆形进度条

源码：

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item {

    //该控件绘制角度为 顺时针

    property int minimumuValue: 0
    property int maximumuValue: 100
    property real currentValue: 0

    //property int maxValue: 100

    //默认起始和终止角度
    property int startAngle: 150
    property int endAngle: 180 - startAngle

    property int arcWidth: 10

    //默认颜色
    property variant backgroundColor: 'rgba(67,67, 67, 0.5)'
    property variant colorGradientBegin: 'rgba(51, 147, 248, 1.0)'
    property variant colorGradientEnd: 'rgba(45, 63, 119,1.0)'


    onCurrentValueChanged: {
        canvas.requestPaint();
    }

    Canvas{
        id:canvas
        width: parent.width
        height: parent.height
        antialiasing: true

        property real centerWidth: width/2
        property real centerHeight: height/2
        property real radius: width/2 - arcWidth - 10
        //property real outRadius: radius+10
        //property real inRadius: radius

        property real angle: (currentValue - minimumuValue)/(maximumuValue-minimumuValue)*((180+endAngle*2)*(Math.PI/180))
       // property real angleOffset: -Math.PI / 2

        onPaint: {
            var ctx = getContext("2d");
            ctx.save();
            ctx.clearRect(0,0, canvas.width, canvas.height);

            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.strokeStyle = backgroundColor;
            ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius+arcWidth, startAngle*(Math.PI/180), 0, false);
            ctx.stroke();

            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255,0, 0, 0.8)';
            ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius+arcWidth, 0, endAngle*(Math.PI/180), false);
            ctx.stroke();

            ctx.beginPath();
            ctx.lineWidth = arcWidth;
            ctx.strokeStyle=backgroundColor;
            ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius, startAngle*(Math.PI/180), endAngle*(Math.PI/180), false);
            ctx.stroke();

            ctx.beginPath();
            ctx.lineWidth = arcWidth;
            var grd = ctx.createLinearGradient(0,0,0,height);
            grd.addColorStop(0,colorGradientBegin);
           // grd.addColorStop(0.5,colorGradientEnd);
            grd.addColorStop(1.0,colorGradientEnd);
            ctx.strokeStyle=grd;
            ctx.fillStyle = grd;

            ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius, startAngle*(Math.PI/180), startAngle*(Math.PI/180) + canvas.angle, false);
            ctx.stroke();

            ctx.restore();
        }

    }

    //当外部Timer的频率低于此duration的时候，回影响currentValue的置0效果，无法置0
    Behavior on currentValue{
        NumberAnimation{
            easing.type: easing.InOutSine
            duration: 300
        }
    }
}

调用：

 CircularProcessor {
                    id: ui_temp_processor_0
                    objectName: "ui_temp_processor_0"
                    x: 30
                    y: 0
                    width: 200
                    height: 200
                    startAngle: 135
                    currentValue: 0
                    arcWidth: 15
                    //colorGradientBegin: 'rgba(255, 186, 51,0.9)'
                    //colorGradientEnd: 'rgba(255, 186, 51, 0.9)'
                }

实际效果：