I have created a sine wave. I added timer in the code and i try to call the delay but i am not able to get it. I try to call near ctx.lineto but no use. i need to add a delay between 1 plotting to another plotting. Pls help me to solve this issue

import QtQuick 2.9
import QtQuick.Window 2.15

Window {

function timer() {
    return Qt.createQmlObject("import QtQuick 2.0; Timer {}", root);
}

id:screen
visible:true
height: 1080
width: 1920
title: qsTr("SineWave")
Rectangle{
    height:parent.height
    width:parent.width
    Timer {
        id: timer
    }

    function delay(delayTime, cb) {
        timer.interval = delayTime;
        timer.repeat = false;
        timer.triggered.connect(cb);
        timer.start();
    }
    Canvas{
        id:canvas
        anchors.fill:parent
        onPaint: {
            var ctx = getContext("2d");
            var cw = parent.width;
            var ch = parent.height;
            var  cx = cw, cy = ch/2;
            var w= width;
            var h= height;
            ctx.lineWidth= 4;
            ctx.clearRect(0, 0, cw, ch);
            ctx.beginPath();
            ctx.moveTo(0, cy);

            for(var x=0;x<1921;x  ){
                var y = Math.sin(x/305);
                ctx.lineTo(x, cy (y*400));//now you add delay of 1sec
                console.log(y)
            }//from here the sine wave is plotted from left to right clean the screen with small from left to right


            ctx.stroke();
            showMaximized(Window)
        }
    }
}

}

CodePudding user response：

This uses a Timer to increment a property called step. In the sine wave drawing step is used to limit the for loop to only draw lines until step.

import QtQuick
import QtQuick.Window

Window {
    id: screen
    visible: true
    height: 1080
    width: 1920
    title: qsTr("SineWave")

    Rectangle {
        height: parent.height
        width: parent.width

        Timer {
            id: timer
            interval: 50
            running: true
            repeat: true
            onTriggered: {
                if (canvas.step > 1921)
                    timer.stop()
                canvas.step  
                canvas.requestPaint()
            }
        }

        Canvas {
            id: canvas

            property int step: 0

            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d")
                var cw = parent.width
                var ch = parent.height
                var cx = cw
                var cy = ch/2
                var w = width
                var h = height
                ctx.lineWidth = 4
                ctx.clearRect(0, 0, cw, ch)
                ctx.beginPath()
                ctx.moveTo(0, cy)

                for (var x = 0; x < canvas.step; x  ) {
                    ctx.lineTo(x, cy   (Math.sin(x / 305) * 400))
                }

                ctx.stroke()
            }
        }
    }
}

CodePudding user response：

If you rewrite your canvas.onPaint to just paint one step of the sine wave, then, you can invoke canvas.requestPaint() repeatedly to paint different intervals of your sine wave with an appropriate delay. I implemented it but found the interval of 1000ms too slow, so, to make it a bit more interesting I reduce the interval to 10ms:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
Page {
    anchors.fill: parent
    title: qsTr("SineWave")
    Canvas {
        id: canvas
        anchors.fill: parent
        property int index: 0
        onIndexChanged: requestPaint()
        onPaint: {
            var ctx = getContext("2d");
            var cy = height/2;
            ctx.lineWidth= 4;
            if (index === 0) ctx.clearRect(0, 0, width, height);
            ctx.beginPath();
            ctx.moveTo(index    , Math.sin( index      * Math.PI / 360) * cy   cy);
            ctx.lineTo(index   1, Math.sin((index   1) * Math.PI / 360) * cy   cy);
            ctx.stroke();
            if (canvas.index < parent.width) timer.start();
        }
        Timer {
            id: timer
            repeat: false
            interval: 10
            onTriggered: canvas.index  
        }
    }
}

You can Try it Online!