How to add animation to Canvas for multiple dynamic corrdinates

KeshavJ

I have 13 set of x,y points to draw a line and i need to move the line based on the new set of 13 points, but the new set of points is received every 500ms, How to add animation between two new 13 set of points. currently i am using canvas to draw the line
I used Translate with SpringAnimation based on behaviour on x cordinates. Is there any other way to handle animation between multiple set of dynamic points in Canvas.

property variant listLeft1: []
property real pathX1Left:0

Canvas {
        id: canvas
            property real dd: 0

            transform: Translate {
            id: secondRotation
            x:pathX1Left

        Behavior on x {
            SpringAnimation { spring: 1; damping:0.9}
        }  }

            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d");
                ctx.strokeStyle = Qt.rgba(.4,.6,.8); // Set the line color
                ctx.lineWidth = 6; // Set the line width
                ctx.clearRect(0, 0, width, height)
                // Draw the line using the 13 x, y coordinates
                ctx.beginPath();
                for (var i = 1; i < listLeft1.length; i++) {
                    ctx.lineTo(listLeft1[i].x, listLeft1[i].y);
                }
                ctx.stroke();
            }
        }

function drawguidelines(){
//Here listLeft1 contains 13 set of cordinates with changes every 500 ms 
pathX1Left = listLeft1[1].x
}

flaudio

Hi @KeshavJ,
I don't think that there are other ways to use animation in canvas. Using canvas you can handle pixel by pixel movement using a Timer (very ugly alternative). Instead of using canvas, have you tried a Shape component? It could be a valid alternative. Advantages: use declarative programming (real qml power) and higher performance (test with a qml profiler). Disadvantages: less flexible (i.e. fixed number of points to draw).