自定义圆形进度条

源码：

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 real warningAngle: 30

    property bool showOutLine: true

    //默认颜色
    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: 0.0
        property real angleOffset: 1.9*(Math.PI/180)
        property real m_startAngle: startAngle*(Math.PI/180)
        property real m_endAngle: endAngle*(Math.PI/180)
        property real m_warningOffset: 0.0

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

            if(endAngle>startAngle)
            {
                angle = (currentValue - minimumuValue)/(maximumuValue-minimumuValue)*((Math.abs(endAngle-startAngle))*(Math.PI/180));

            }
            else
            {
                angle = (currentValue - minimumuValue)/(maximumuValue-minimumuValue)*((Math.abs(endAngle-startAngle+360))*(Math.PI/180));

            }

            if(showOutLine)
            {
                if(endAngle > warningAngle)
                {
                     m_warningOffset = (Math.abs(endAngle-warningAngle)*1.0)*(Math.PI/180);
                }
                else
                {
                    m_warningOffset = (Math.abs(endAngle-warningAngle+360)*1.0)*(Math.PI/180);
                }
            }


            if(showOutLine)
            {
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.strokeStyle = backgroundColor;
                ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius+arcWidth, m_startAngle, m_warningOffset, 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, m_warningOffset, m_endAngle, false);
                ctx.stroke();
            }

            ctx.beginPath();
            ctx.lineWidth = arcWidth;
            ctx.strokeStyle=backgroundColor;
            ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius, m_startAngle, m_endAngle, 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, m_startAngle, m_startAngle + canvas.angle, false);
            ctx.stroke();

            if(currentValue > 0)
            {
                ctx.beginPath();
                ctx.lineWidth = arcWidth;
                ctx.strokeStyle = 'rgba(255,255,255, 0.7)';
                ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius,  m_startAngle + canvas.angle - angleOffset, m_startAngle + 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
                    showOutLine: true
                    //colorGradientBegin: 'rgba(255, 186, 51,0.9)'
                    //colorGradientEnd: 'rgba(255, 186, 51, 0.9)'
                }

实际效果：