如何从QML画布中永久删除对象？

Question

考虑下面的QML代码，它允许我通过鼠标单击将点插入到空白QML画布上，然后使用左上角的一个按钮清除画布上的所有输入点和相应的图片。

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

这段代码的行为非常奇怪。假设我在画布上输入了几个点，然后单击“清除输入”按钮。然后，如预期的那样，所有的图片(即与点对应的小圆圈)从画布上消失，arrpoints数组被设置为空。

但是，当我再次开始单击画布时，清除的图片是重绘的，以及正在输入的新点！！为什么要这样？打印到控制台后，我仍然可以看到arrpoints=[]，所以问题应该是在onPaint部分清除画布。

我如何告诉QML完全删除它的画布内存？

Answer 1

如果要清理画布，必须重置上下文。在这种情况下，实现一个函数并强制画布进行更新。

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