主页 / ubuntu / 问题 / 610875
Accepted
Cos64
Asked: 2015-04-19 06:03:04 +0800 CST

如何使 QML Canvas 可见？

  • 772

我正在尝试在 Ubuntu 手机应用程序的屏幕上画一些东西。我在 Ubuntu SDK 中创建了一个新的“QML App with Simple UI (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

这是正在运行的应用程序的样子：

画布示例的屏幕截图

我究竟做错了什么？

ubuntu-touch

1 个回答

  1. Best Answer
    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恰好有效，但没有明确记录（因此它可能会中断）。

    • 2

相关问题