qml 汽车仪表表盘圆形进度条

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property real minimumValue: 0
    property real maximumValue: 116
    property real currentValue: 0
    property color secondaryColor: "blue"
    property real maxValue: 100

    onCurrentValueChanged:canvas.requestPaint()

    Canvas {
        id: canvas
        width: 640
        height: 480
        antialiasing: true

        property real centerWidth: width/2
        property real centerHeight: height/2
        property real radius: width/3

        // this is the angle that splits the circle in two arcs
        // first arc is drawn from 0 radians to angle radians
        // second arc is angle radians to 2*PI radians
        property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Math.PI

        // we want both circle to start / end at 12 o'clock
        // without this offset we would start / end at 9 o'clock
        property real angleOffset: -Math.PI / 2
        signal clicked()

        onPaint: {
            var ctx = getContext("2d");
            ctx.save();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (mouseArea.pressed) {
                timer.running = true;
            }

            //bottom arc
            ctx.beginPath();
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'rgba(255,0,0,0.5)';
            ctx.strokeStyle = "lightgreen"
            ctx.arc(canvas.centerWidth,
                    canvas.centerHeight,
                    canvas.radius,
                    2,
                    7.4);
            ctx.stroke();

            //progress arc
            ctx.beginPath();
            ctx.lineWidth = 5;
            var grd = ctx.createLinearGradient(0,0,640,0);
            grd.addColorStop(0,Qt.rgba(10,0,0,0));
            grd.addColorStop(1.0,Qt.rgba(0,0,25,0.6));
            ctx.strokeStyle = grd;
            ctx.fillStyle = grd

            ctx.arc(canvas.centerWidth,
                    canvas.centerHeight,
                    canvas.radius,
                    2,
                    2 + canvas.angle);
            ctx.stroke();

            ctx.restore();
        }

        Text {
            id: txt_progress
            anchors.centerIn: parent

            font.pixelSize: 16
            text: canvas.text
            color: "red"
        }

        MouseArea {
            id: mouseArea

            anchors.fill: parent
            onClicked: canvas.clicked()
            onPressedChanged: canvas.requestPaint()
        }

        Timer{
            id: timer
            interval: 30;
            running: false;
            repeat: true;
            onTriggered: {
                if(currentValue === 100) {
                    currentValue = 0;
                    txt_progress.text = "0"
                }
                if(currentValue