javascript - 从 QT 中的 javascript 访问 QML Canvas

Question

我正在尝试使用QtQuick 2.7在QT QML中创建非常简单的应用程序。我在 Canvas 上添加了一个矩形，按下按钮后，我想添加另一个矩形。问题是，点击按钮后应该出现的矩形没有创建(我在 Canvas 上看不到它)，但是console.log( )输出 Button 1 clicked 我明白了。我做错了什么？是否需要刷新 Canvas 什么的？我的代码是:

Page1Form {
    property alias canvas: canvas
    button1.onClicked: {
        console.log("Button 1 clicked.");
        var ct = canvas.getContext("2d");
        ct.fillStyle = Qt.rgba(0, 0, 1, 1);
        ct.fillRect(50, 50, 10, 10);//this doesnt work
    }
    Canvas {
        id: canvas
        x: 16
        y: 39
        width: 342
        height: 517
        onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle = Qt.rgba(1, 1, 1, 1);
                ctx.fillRect(10, 10, 10, 10);
        }
    }
}

Answer 1

Canvas 仅在被要求后才重新绘制。请参阅documentation for the paint() signal :

This signal is emitted when the region needs to be rendered. If a context is active it can be referenced from the context property.

This signal can be triggered by markdirty(), requestPaint() or by changing the current canvas window.

因此，完成绘图后，调用 requestPaint():

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Column {
        anchors.fill: parent
        Canvas {
            id: canvas
            width: parent.width
            height: 300
            onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle = Qt.rgba(1, 0, 1, 1);
                ctx.fillRect(10, 10, 10, 10);
            }
        }
        Button {
            text: "Add"
            onClicked: {
                console.log("Button 1 clicked.");
                var ct = canvas.getContext("2d");
                ct.fillStyle = Qt.rgba(0, 0, 1, 1);
                ct.fillRect(50, 50, 10, 10);//this doesnt work
                canvas.requestPaint();
            }
        }
    }
}

不过，在我看来，这似乎是一种奇怪的做法；通常，您会通过 paint() 信号响应 Canvas ，告诉您它已准备好进行绘制，而不是相反。这在实践中意味着您的蓝色矩形将在 onPaint 处理程序中的之前(因此位于其下方)绘制。