在QML中没有定义Javascript图像

Question

我想在我的QML文件(QT5.11)中使用new Image()。我使用import ... as来避免QML与JS图像名称的冲突。但是现在，在下面的最小示例中产生的错误是：

ReferenceError:图像未定义

import QtQuick 2.11 as QQ

QQ.Canvas {
    width: 200
    height: 200

    onPaint: {
        // this is the javascript part.
        var img = new Image();
        // ...
    }
}

任何帮助都是非常感谢的，以解决这个问题。我是否需要在我的操作系统(debian)上安装任何软件包才能工作？

Answer 1

如果要在Canvas中绘制图像，则需要使用loadImage()。它将异步加载，画布将在加载任何新映像时发出imageLoaded。

然后，您可以使用drawImage()绘制它，并将加载的URL传递给它：

Canvas {
    property string imageUrl: "qrc://images/image.png"
    Component.onCompleted: loadImage(imageUrl)
    onImageLoaded: requestRepaint()
    onPaint: {
        var ctx = getContext("2d");
        ctx.drawImage(imageUrl);
    }
}