从QT中的javascript访问QML画布

Accessing QML canvas from javascript in QT

本文关键字：QML 画布 访问 javascript QT 中的      更新时间：2023-09-26

我正试图使用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);
        }
    }
}

Canvas只有在被要求重新绘制后才会重新绘制。请参阅paint（）信号的文档：

该信号是在需要渲染区域时发出的。如果上下文处于活动状态，则可以从上下文属性中引用该上下文。

此信号可以通过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处理程序中的之前（因此在下面）。

相关文章：