更新QML画布

Question

我是一个QML / Javascript菜鸟，希望得到一些帮助。

我想在一个白色的QML画布元素上插入一些点(用小黑圈表示)，然后在它们上运行一个算法(比如通过外部几何库找到凸包)。

这是我的QML代码。

import QtQuick 2.5
import QtQuick.Window 2.2

Window{
    id: root
    width: 640 
    height: 480 
    visible: true 

    Canvas {

        width:  1000
        height: 1000

        onPaint: {
            var context = getContext("2d");

        }

        MouseArea {
            id: mymouse
            anchors.fill: parent

            property var arrpoints : []
            onClicked: {

                // Record mouse-position
                arrpoints = arrpoints.concat([mouseX, mouseY])
                console.log(arrpoints)

            } 
        }

    } 
}

到目前为止，上面的代码打开了一个窗口，上面有一个QML画布，可以跟踪画布上的位置(通过数组arrpoints)，并将点击点的数组输出到控制台。

但是现在，每次arrpoints发生变化，我如何“告诉”QML在那个点上立即画一个小黑圈呢？

我本以为QML的onPaint部分会立即触发新状态的呈现，但似乎在用户开始与其交互之前，该部分仅用于画布上的初始绘制。

Answer 1

您必须调用画布requestPaint()函数来强制绘制。适当地保存职位数据也是明智的：{"x": x_value, "y": y_value}

import QtQuick 2.5
import QtQuick.Window 2.2

Window{
    id: root
    width: 640 
    height: 480 
    visible: true 

    Canvas {
        id: canvas

        width:  1000
        height: 1000

        onPaint: {
            var context = getContext("2d")
            context.strokeStyle = Qt.rgba(0, 0, 0, 1)
            context.lineWidth = 1
            for(var i=0; i < mymouse.arrpoints.length; i++){
                var point = mymouse.arrpoints[i]
                context.ellipse(point["x"]-5, point["y"]-5, 10, 10)
            }
            context.stroke()
        }

        MouseArea {
            id: mymouse
            anchors.fill: parent
            property var arrpoints : []
            onClicked: {
                arrpoints.push({"x": mouseX, "y": mouseY})
                canvas.requestPaint()
            } 
        }
    } 
}