0

Consider the QML code below, which allows me to insert points onto a blank QML canvas, with mouse-clicks and then clear all the input points and the corresponding pictures on the canvas, using a button placed in the upper-left hand corner

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window{
    id: root
    width: 640 
    height: 480 
    visible: true 

    Canvas {
        id: mycanvas
        width:  1000
        height: 1000

        property var arrpoints : []

        onPaint: {
            var context = getContext("2d");
            // Delete everything drawn before?
            context.clearRect(0, 0, mycanvas.width, mycanvas.height);

            // Render all the points as small black-circles
            context.strokeStyle = Qt.rgba(0, 1, 1, 0)

            // Draw all the points
            for(var i=0; i < arrpoints.length; i++){
                var point = arrpoints[i]
                context.ellipse(point["x"], point["y"], 10, 10)
                context.fill()
                context.stroke()

            }
        }

        // For mousing in points.
        MouseArea {
            id: mymouse
            anchors.fill: parent

            onClicked: {
                // Record mouse-position into all the input objects
                mycanvas.arrpoints.push({"x": mouseX, "y": mouseY})

                mycanvas.requestPaint()
                console.log( mycanvas.arrpoints )
            } // onClicked
        }// MouseArea
    } // Canvas

    Button {
        text: "clear input"
        onClicked: {
          mycanvas.arrpoints.length = 0
          mycanvas.requestPaint()
          console.log( mycanvas.arrpoints )
        }
    }
}//Window

This code behaves quite strangely. Suppose I input a few points onto the canvas, and then click the "clear input" button. then as expected all the pictures (ie little circles corresponding to points) vanish from the canvas and the arrpoints array is set to empty.

But when I start clicking on the canvas again, the cleared pictures are redrawn, alongside the new points being entered!! Why should this be? After printing to the console, I can still see arrpoints=[] so the problem should be with the clearing of the canvas in the onPaint section.

How do I tell QML to erase its canvas memory completely?

1 Answer 1

1

If you want to clean the Canvas you must reset the context. In this case, implement a function that does it and force the canvas to update.

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window{
    id: root
    width: 640 
    height: 480 
    visible: true 

    Canvas {
        id: mycanvas
        width:  1000
        height: 1000

        property var arrpoints : []

        onPaint: {
            var context = getContext("2d");
            // Delete everything drawn before?
            context.clearRect(0, 0, mycanvas.width, mycanvas.height);

            // Render all the points as small black-circles
            context.strokeStyle = Qt.rgba(0, 1, 1, 0)

            // Draw all the points
            for(var i=0; i < arrpoints.length; i++){
                var point = arrpoints[i]
                context.ellipse(point["x"], point["y"], 10, 10)
                context.fill()
                context.stroke()

            }
        }

        function clear() {
            var ctx = getContext("2d");
            ctx.reset();
            mycanvas.requestPaint();
        }

        // For mousing in points.
        MouseArea {
            id: mymouse
            anchors.fill: parent
            onClicked: {
                // Record mouse-position into all the input objects
                mycanvas.arrpoints.push({"x": mouseX, "y": mouseY})
                mycanvas.requestPaint()
                console.log( mycanvas.arrpoints )
            } // onClicked
        }// MouseArea
    } // Canvas

    Button {
        text: "clear input"
        onClicked: {
          mycanvas.arrpoints.length = 0
          mycanvas.clear()
          console.log( mycanvas.arrpoints )
        }
    }
}//Window
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.