圆形进度条-图片方式

此方式有别于之前的一篇纯绘制，这个基于图片，通过路径剪裁，达到显示的目的

代码跟之前有做删减

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

    property string backgroundImg: ""
    property string forceImg: ""


    onCurrentValueChanged: {
        canvasImage.requestPaint();
    }

    Canvas{
        id:canvasImage
        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, canvasImage.width, canvasImage.height);

            ctx.drawImage(backgroundImg, 0,0, canvasImage.width, canvasImage.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));

            }

            ctx.beginPath();

            ctx.arc(canvasImage.centerWidth, canvasImage.centerHeight, canvasImage.centerHeight, m_startAngle, m_startAngle + canvasImage.angle, false);
            ctx.lineTo(canvasImage.centerWidth, canvasImage.centerHeight);
            //ctx.closePath();
            ctx.clip();

            ctx.drawImage(forceImg,0,0, canvasImage.width, canvasImage.height);

            //描边，此函数会画出边线
            //ctx.stroke();

            ctx.restore();
        }

    }

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

 

使用：

 CircularProcessorByImage{
        id:myImageProcess
        x:490
        y:0
        width: 165
        height: 165
        startAngle: 150
        endAngle: 270
        currentValue: 0
        arcWidth: 30
        showOutLine: false
        backgroundImg: "qrc:/Image/45.png"
        forceImg: "qrc:/Image/53.png"
    }

    Timer{
        interval: 200
        running: true
        repeat: true
        onTriggered: {
            if(myProcess.currentValue < myProcess.maximumuValue)
            {
                //console.log(myProcess.currentValue);

                myProcess.currentValue +=1;

                myImageProcess.currentValue +=1;

                if(!isChangeImg && (myProcess.currentValue >= myProcess.maximumuValue*0.8))
                {
                    myImageProcess.forceImg = "qrc:/Image/54.png";

                    isChangeImg = true;
                }

            }
            else{
                myProcess.currentValue = 0;
                myImageProcess.currentValue = 0;

                myImageProcess.forceImg = "qrc:/Image/53.png";

                isChangeImg = false;
            }
        }
    }

 

效果演示：

附背景图片：