Question

我有一个Canvas对象，其onPaint方法看起来像这样：

onPaint: {
    var ctx = getContext("2d");
    ctx.fillStyle = Qt.rgba(1, 1, 1, 1);
    ctx.fillRect(0, 0, width, height);
}

只需用白色填充画布即可。

此后，我想在按下某些Button时在此Canvas上绘制一个点，是否可以仅在Button对象的onClick方法中更改Canvas？对我来说，如果我想在Canvas上绘制某些东西，我需要调用requestPaint（），但是requestPaint（）只会将所有Canvas用白色填充。所以，我看到一个解决方案，我需要声明 property var point: [x, y]并将onPaint方法更改为以下内容：

onPaint: {
    var ctx = getContext("2d");
    ctx.fillStyle = Qt.rgba(1, 1, 1, 1);
    ctx.fillRect(0, 0, width, height);
    //pseudocode
    if point is not empty:
        ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
        ctx.fillRect(point.x, point.y, 1, 1)
}

它将起作用吗？有没有更好的方式来做我描述的事情？谢谢。

Answer 1

通常，您可以创建一个null属性，并使用发生更改以调用requestPaint()时发出的信号，并在onPaint()中绘制一个模拟该点的圆。

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    property var drawPoint: null
    onDrawPointChanged: canv.requestPaint()

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 9

        Button {
            height: 40
            Layout.fillWidth: true
            text: qsTr("Random Point")
            onClicked: drawPoint = Qt.point(Math.random()*canv.width ,Math.random()*canv.height);
        }

        Canvas {
            id: canv
            Layout.fillWidth: true
            Layout.fillHeight: true
            onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle = Qt.rgba(1, 1, 1, 1);
                ctx.fillRect(0, 0, width, height);

                if(drawPoint !== null){
                    ctx.beginPath();
                    ctx.arc(drawPoint.x, drawPoint.y, 5, 0, 2 * Math.PI);
                    ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
                    ctx.fill()
                    ctx.strokeStyle = Qt.rgba(1, 0, 0, 1);
                    ctx.stroke();
                }
            }
        }
    }
}

在qml中是否可以重绘Canvas对象的内容？

1 个答案: