Javascript 图像未在 QML 中定义

Question

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

ReferenceError: Image is not defined

import QtQuick 2.11 as QQ

QQ.Canvas {
    width: 200
    height: 200

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

非常感谢任何帮助来解决这个问题。我需要在我的 OS (debian) 上安装任何软件包才能工作吗？

Answer 1

如果您想在 Canvas 中绘制图像，您需要使用 loadImage()。它将异步加载，canvas 将在加载任何新图像时发出 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);
    }
}

Javascript 图像未在 QML 中定义

Javascript Image is not defined in QML

javascript

qt

image

qml