圆形进度条-图片方式(旋转&剪裁)

该实现效果有别于之前的一篇文章，之前的文章没有对图片进行旋转，这次的图片比较特殊，需要旋转图片完成扫盘效果。

 

这里重点说明两个：

1、路径剪裁扇形区域的0°是水平的，可顺时针也可逆时针

2、渐变图片(下面第二张图)不是完整渐变的，要把渐变终点移动到Ready的位置，需要知道移动的角度，在代码里面是offsetAngle变量

 

先上图片：

 

效果如下：

该效果从Ready 到4之间渐变图片未做选择，过了4之后才有旋转

Ready-4之间只剪裁图片，根据当前角度实时显示剪裁区域的图片

代码：

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

Item{
    property int currentAngle: 0
    property string srcImage: "qrc:/resource/10_22.png"
    property int startAngle: 0
    property int endAngle: 0
    property int offsetAngle: 0

    property var url;

    onCurrentAngleChanged:{
        canvasImage.requestPaint();

    }

    Canvas{
        id:canvasImage
        width: parent.width
        height: parent.height

        property int centerWidth:canvasImage.width/2
        property int centerHeight:canvasImage.height/2

        property int  angle_:  currentAngle-offsetAngle

        onPaint: {
            var ctx = getContext("2d");

            ctx.save();
            ctx.clearRect(0,0, canvasImage.width, canvasImage.height);


            if(currentAngle>=0)
            {
                ctx.translate(centerWidth, centerHeight);

                ctx.beginPath();
                ctx.arc(0, 0, canvasImage.centerHeight, (startAngle)*(Math.PI/180), (startAngle+angle_)*(Math.PI/180), false);
                ctx.lineTo(0,0);
                //ctx.closePath();
                ctx.clip();

                ctx.rotate(currentAngle*Math.PI/180);



                ctx.drawImage(srcImage,0-centerWidth,0-centerHeight, canvasImage.width, canvasImage.height);
            }
            else
            {
                ctx.beginPath();
                ctx.arc(centerWidth, centerHeight, canvasImage.centerHeight, (startAngle)*(Math.PI/180), (startAngle+angle_)*(Math.PI/180), false);
                ctx.lineTo(centerWidth, centerHeight);
                //ctx.closePath();
                ctx.clip();

                ctx.drawImage(srcImage,0,0, canvasImage.width, canvasImage.height);
            }





            ctx.restore();
        }
    }
}

上面onPaint函数内有一个if..else..分支，在没有else的代码，只有if块内的代码的时候效果如下：

在Ready的时候能明显看出图片被裁掉，不太好看

 

调用：

//angleBrige是一个公共变量
//因为渐变图片和指针分离的，需要同步移动，所以该变量进行同步

PieImageMask{
                id:pieImgMask
                visible: true
                x: 28
                y: 14
                width: 558
                height: 559
                startAngle:138
                offsetAngle: -131
                currentAngle: angleBrige
                srcImage: "qrc:/resource/10_22.png"
            }

            SequentialAnimation{
                running: true
                loops: Animation.Infinite

                NumberAnimation{
                    target:ui_0_
                    property: "angleBrige"
                    from: -131
                    to:-90
                    easing.type: Easing.InOutSine
                    duration: 3000
                }

                NumberAnimation{
                    target:ui_0_
                    property: "angleBrige"
                    from: -90
                    to:0
                    easing.type: Easing.InOutSine
                    duration: 2000
                }

                NumberAnimation{
                    target:ui_0_
                    property: "angleBrige"
                    from: 0
                    to:131
                    easing.type: Easing.InOutSine
                    duration: 3500
                }

                NumberAnimation{
                    target:ui_0_
                    property: "angleBrige"
                    from: 131
                    to:-131
                    easing.type: Easing.InOutSine
                    duration: 4500
                }

            }



            Image
            {
                id: ui_9_
                objectName: "ui_9_"
                x: 278
                y: 7
                width: 60
                height: 124
                visible: true
                source: "qrc:/resource/9_.png"

                transform: Rotation{
                    id: ui_1_needle_tansform
                    origin.x:30
                    origin.y:288
                    axis { x: 0; y: 0; z: 1 }
                    angle:angleBrige
                }
            }