How I can clear canvas in QML?



  • Hello!
    Sorry for my English I use translate.google
    How I can clear canvas in QML?
    For exemle I draw line in canvas and when I click on mousearea canvas should be cleaned, but it's not happening. Console log write fine.
    This my exemple code:

    import QtQuick 2.7
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("Click...");
                canvas.clear_canvas();
            }
        }
    
    
        Canvas {
            id: canvas
            anchors.fill: parent
    
            onPaint: {
                var ctx = getContext("2d");
                ctx.lineWidth = 3;
                ctx.strokeStyle = "red";
    
                ctx.beginPath();
                ctx.moveTo(10, 10);
                ctx.lineTo(500, 300);
                ctx.stroke();
    
                ctx.lineWidth = 3;
                ctx.strokeStyle = "blue";
    
                ctx.beginPath();
                ctx.moveTo(500, 300);
    
                ctx.lineTo(50, 200);
                ctx.stroke();
            }
    
            function clear_canvas() {
                var ctx = getContext("2d");
                ctx.reset();
                canvas.requestPaint();
            }
        }
    }
    
    

    Thank you


  • Lifetime Qt Champion

    Hi,

    AFAICS, you clear the canvas and right after you request a repaint which will trigger the onPaint function.



  • @SGaist I'm sorry, I don't understand you. clear_canvas function is called when I click on mousearea (console.log prints "Click"), but the Canvas is not cleared.
    I watched this lesson https://www.youtube.com/watch?v=CR2qQebqv6I, like almost all the same (if not to take a bunch of C ++).



  • @SGaist Thank you....
    I do not understand English, an translate and me even more confused ... my function clear() again is the fact that it is written in onPaint, redraws the lines .....
    I redid the test code a bit and it worked:

    import QtQuick 2.7
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
            anchors.left: parent.left
            anchors.bottom: parent.bottom
    
            width: 70
            height: 30
            border.color: "black"
    
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                text: qsTr("Paint")
                font.pointSize: 12
            }
    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    canvas.paint_canvas()
                    console.log("Paint...")
                }
            }
        }
    
        Rectangle {
            anchors.right: parent.right
            anchors.bottom: parent.bottom
    
            width: 70
            height: 30
            border.color: "black"
    
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                text: qsTr("Clear")
                font.pointSize: 12
            }
    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    canvas.clear_canvas()
                    console.log("Clear...")
                }
            }
        }
    
        Canvas {
            id: canvas
            anchors.fill: parent
    
            function paint_canvas() {
                var ctx = getContext("2d");
                ctx.lineWidth = 3;
                ctx.strokeStyle = "red";
    
                ctx.beginPath();
                ctx.moveTo(10, 10);
                ctx.lineTo(500, 300);
                ctx.stroke();
    
                ctx.lineWidth = 3;
                ctx.strokeStyle = "blue";
    
                ctx.beginPath();
                ctx.moveTo(500, 300);
    
                ctx.lineTo(50, 200);
                ctx.stroke();
                canvas.requestPaint();
            }
    
            function clear_canvas() {
                var ctx = getContext("2d");
                ctx.reset();
    //            can be used
    //            ctx.clearRect(0,0,300,200);
                canvas.requestPaint();
            }
        }
    }
    

  • Lifetime Qt Champion

    Glad you found out and thanks for sharing !

    Since you have it working now please mark the thread as solved using the Topic Tools button so there other forum users may know a solution has been found :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.