从QT中的JavaScript访问QML画布

Question

我正在尝试使用QtQuick 2.7在QT QML中创建非常简单的应用程序。 我在画布上添加了一个矩形 ，按下按钮后，我想添加另一个矩形 。 问题是，没有创建应该在单击按钮后出现的矩形 （我在画布上看不到它），但是console.log（）输出看到Button 1 cliceked 。 我做错了什么？ 是否需要刷新画布或其他内容？ 我的代码是：

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仅在被要求后才重涂。 请参阅paint（）信号的文档 ：

当需要渲染区域时，将发出此信号。 如果上下文是活动的，则可以从context属性中引用它。

可以通过markdirty（），requestPaint（）或更改当前画布窗口来触发此信号。

因此，完成绘制后，请调用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()信号进行绘制了，而不是相反。 实际上，这意味着您的蓝色矩形将在onPaint处理程序中的蓝色矩形之前 （因此在其下方）绘制。