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

【问题标题】：How do I permanently delete objects from a QML canvas?如何从 QML 画布中永久删除对象？
【发布时间】：2017-12-17 23:29:10
【问题描述】：

考虑下面的 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 完全擦除其画布内存？

【问题讨论】：

标签： qt canvas qml qt5

【解决方案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

【讨论】：