☰

如何使 QML Canvas 可见？

tag-icon • tag-icon ubuntu-touch qml
如何使 QML Canvas 可见？

我正在尝试在 Ubuntu 手机应用程序中在屏幕上绘制一些东西。我在 Ubuntu SDK 中创建了一个新的“具有简单 UI 的 QML 应用程序 (qmlproject)”，并将内容替换Main.qml为以下内容：

import QtQuick 2.0
import Ubuntu.Components 1.1

MainView {
    objectName: "mainView"

    applicationName: "canvasexample.cos64"

    useDeprecatedToolbar: false

    width: units.gu(50)
    height: units.gu(50)

    Page {
        title: i18n.tr("Canvas Example")

        Canvas {
            anchors {
                margins: units.gu(2)
                fill: parent
            }
            id: canvas
            width: 100
            height: 200
            onPaint: {
                console.log("on paint");
                var ctx = canvas.getContext('2d');
                ctx.save();
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.beginPath();
                ctx.lineTo(75,70);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }

            onPainted: {
                console.log("painted");
            }

            MouseArea {
                id: buttonMouseArea
                anchors.fill: parent
                onClicked: {
                    console.log("clicked");
                    canvas.requestPaint();
                }
            }

            Component.onCompleted: {
                console.log("completed")
            }

            onScaleChanged: {
                console.log("scale changed")
            }

            onRotationChanged: {
                console.log("rotated");
            }
        }
    }
}

我没有收到任何错误，但是画布不可见，尽管我可以单击它，如控制台输出所示：

Starting /usr/lib/x86_64-linux-gnu/qt5/bin/qmlscene...
qml: completed
qml: on paint
qml: painted
qml: clicked
qml: on paint
qml: painted
/usr/lib/x86_64-linux-gnu/qt5/bin/qmlscene exited with code 0

正在运行的应用程序如下所示：

Canvas 示例的屏幕截图

我究竟做错了什么？

答案1

ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(75,90);
ctx.lineTo(75,70);
ctx.closePath();
ctx.stroke();
ctx.restore();

编辑

如果有人在寻找学术解释，那么问题在于你需要两个点来画一条线，而库显然没有提供起点。你应该用方法设置它moveTo。用设置起点碰巧lineTo有效，但没有明确的记录（因此它可能会并且会失效）。

相关内容