如何从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

如果要清理Canvas，则必须重置上下文。在这种情况下，实现一个执行它的功能并强制画布更新。

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