Question

我是QML / Javascript noob，并希望得到一些帮助。

我想将一些点（表示为小黑圈）插入到白色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发生变化时，我该如何告诉＆＃39; QML立即在那个点画一个小黑圈？

我原以为QML的onPaint部分会立即触发新状态的渲染，但似乎该部分仅用于画布上的初始绘制，然后才开始与用户进行交互。

Answer 1

你必须调用canvas 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()
            } 
        }
    } 
}

更新QML画布

1 个答案: