Animation in Canvas

[Bhushan_Sure]

New_Project_2.qml

import QtQuick 2.0

Rectangle {
    id: knob
    color: "black"
    transformOrigin: Item.Center

    property int lineWidth: width / 8
    property int fontSize: width / 7

    property color knobBackgroundColor: Qt.rgba(0.1, 0.1, 0.1, 0.1)
    property color knobColor: Qt.rgba(1, 0, 0, 1)

    //value parameters
    property double from:0
    property double value: 60
    property double to: 100

    //progress circle angle
    property double fromAngle: Math.PI - 1
    property double toAngle: Math.PI *2 + 1

    //progress from right to left
    property bool reverse: false

    function update(value) {
        knob.value = value
        canvas.requestPaint()
    }

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

        property int radius: background.width/2

        onPaint: {
            var ctx = background.getContext('2d');
            ctx.strokeStyle = "gray";
            ctx.lineWidth = knob.lineWidth;
            ctx.lineCap = "round"
            ctx.beginPath();
            ctx.clearRect(0, 0, background.width, background.height);
            ctx.arc(radius, radius, radius - knob.lineWidth, knob.fromAngle, knob.toAngle, false);
            ctx.stroke();
        }
    }

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

        property double step: knob.value / (knob.to - knob.from) * (knob.toAngle - knob.fromAngle)
        property int radius: width/2

        onPaint: {
            var ctx = canvas.getContext('2d');
            ctx.strokeStyle = "yellow" ;
            ctx.lineWidth = knob.lineWidth;
            ctx.lineCap = "round"
            ctx.beginPath();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (knob.reverse) {
                ctx.arc(radius, radius, radius - knob.lineWidth, knob.toAngle, knob.toAngle - step, true);
            } else {
                ctx.arc(radius, radius, radius - knob.lineWidth, knob.fromAngle, knob.fromAngle + step, false);
            }
            ctx.stroke();
        }
    }
}

Useit.qml

import QtQuick 2.0

Rectangle
{
    height: 500
    width: 700
    color: "black"

    New_Project_2
    {
        id: knob
        anchors.centerIn: parent
        width: 200
        height: 200
        from:0
        to: 100
        fromAngle: Math.PI - 1
        toAngle: Math.PI*2
        reverse: false
        rotation: 29
        value: 10
    }

    Rectangle
    {
        width:50
        height: 50
        color: "green"

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
               knob.update(30)
            }
        }
    }
}

The progress bar is moving, but i want animation in it, like it should move slowly,
to the point ? Can anybody suggest what should do ?

[J.Hilk]

hi @Bhushan_Sure

if your "progress bar" is working as you want it to, you can simply add a timer object and change the value

Timer {
    running: true
    rebelte: true
    interval: 20 //ms
    
    onTriggered: {
    if (value < to)
        value++
     else
        value = from
    }
}

you probably also want to call ctx.reset() in your onPaint function, to clear your previous drawings

---

alternatively, there's also QPropertyAnimation

---

That said, I think this should work as well

Behavior on value{
            NumberAnimation{
                duration: 300 //ms
            }
        }

than you have an automatic animation each time you change your value property

[Bhushan_Sure]

@J.Hilk Both of the things are not working , I tried, Still the same.

[J.Hilk]

@Bhushan_Sure

works fine for me:

//RoundPbar

import QtQuick 2.11

Rectangle {
    id: knob
    color: "black"
    transformOrigin: Item.Center

    property int lineWidth: width / 8
    property int fontSize: width / 7

    property color knobBackgroundColor: Qt.rgba(0.1, 0.1, 0.1, 0.1)
    property color knobColor: Qt.rgba(1, 0, 0, 1)

    //value parameters
    property double from:0
    property double value: 60
    property double to: 100

    //progress circle angle
    property double fromAngle: Math.PI - 1
    property double toAngle: Math.PI *2 + 1

    //progress from right to left
    property bool reverse: false

    onValueChanged: canvas.requestPaint()

    Behavior on value {
        NumberAnimation{
                        duration: 1000 //ms
                    }
    }

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

        property int radius: background.width/2

        onPaint: {
            var ctx = background.getContext('2d');
            ctx.strokeStyle = "gray";
            ctx.lineWidth = knob.lineWidth;
            ctx.lineCap = "round"
            ctx.beginPath();
            ctx.clearRect(0, 0, background.width, background.height);
            ctx.arc(radius, radius, radius - knob.lineWidth, knob.fromAngle, knob.toAngle, false);
            ctx.stroke();
        }
    }

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

        property double step: knob.value / (knob.to - knob.from) * (knob.toAngle - knob.fromAngle)
        property int radius: width/2

        onPaint: {
            var ctx = canvas.getContext('2d');
            ctx.strokeStyle = "yellow" ;
            ctx.lineWidth = knob.lineWidth;
            ctx.lineCap = "round"
            ctx.beginPath();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (knob.reverse) {
                ctx.arc(radius, radius, radius - knob.lineWidth, knob.toAngle, knob.toAngle - step, true);
            } else {
                ctx.arc(radius, radius, radius - knob.lineWidth, knob.fromAngle, knob.fromAngle + step, false);
            }
            ctx.stroke();
        }
    }
}


//main.qml
import QtQuick 2.9
import QtQuick.Window 2.2

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

    RoundPbar {
        id: pbar

        anchors.fill: parent

        value: 10
    }

    MouseArea {
        anchors.fill: parent
        onPressed: pbar.value = pbar.value +10
    }
}

[Bhushan_Sure]

@J.Hilk Thank you so much for this help :) :) Now it's working correctly.