Qt/QML : 将 QImage 从 C++ 发送到 QML 并在 GUI 上显示 QImage

2022-01-19 00:00:00 qt qml c++

我创建了一个 Publisher 类，它定期发出 QImage 对象.

I created a class Publisher which periodically emits a QImage object.

但是，我很难将 QImage 绘制到 QML 元素.Image 和 Canvas QML 组件似乎需要 QUrl 而不是 QImage，但我不需要确定如何将我的 QImage 转换为 QUrl.Edit4:当我说 QUrl 时，我并不是说我正在尝试将图像转换为 URL.那是胡说八道.我的意思是我想生成一个对该图像的引用，它不在磁盘上，并且 QML 组件要求的数据类型是 URL.

However I'm having a tough time drawing the QImage to a QML element. It appears that the Image and Canvas QML components require a QUrl instead of a QImage, but I'm not sure how to convert my QImage to a QUrl. When I say QUrl, I don't mean I'm trying to convert an image to a URL. That's nonsense. I mean I want to generate a reference to this image, which is not on disk, and the data type that QML components are asking for is a URL.

我做了一些研究，发现 QQuickImageProvider 提供了一个解决方案，但我没有找到任何文档解释如何将我的 QImage 信号转换为 QUrl 我可以用于绘图.任何示例代码或参考文档将不胜感激.

I've done some research and found that QQuickImageProvider provides a solution, but I haven't found any documentation explaining how to convert my QImage signal to a QUrl that I can use for drawing. Any example code or reference documentation would be appreciated.

感谢您的帮助！

我看过这里:http://qt-project.org/doc/qt-5.0/qtquick/qquickimageprovider.html 我看不到如何将 QImage 传递给快速图像提供程序并从中创建 QUrl.

I've taken a look here: http://qt-project.org/doc/qt-5.0/qtquick/qquickimageprovider.html and I do not see how I pass a QImage to the quick image provider and from it create a QUrl.

编辑2.这是标题.实现应该不重要.

Edit2. Here is the header. The implementation should not be important.

class Publisher
{
    Q_OBJECT

public:
    Publisher(QObject* parent = 0);

    virtual ~Publisher(void);

Q_SIGNALS:

    void newImage(const QImage& newImage);
};

编辑 3. 这是我的 QML 代码，但我不知道如何绘制我的 QImage，所以这段代码有点没有意义.

Edit 3. Here is my QML code, but I don't know how to draw my QImage, so this code is kind of meaningless.

我的 main.cpp 文件:

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    qmlRegisterType<Publisher>("Components", 1, 0, "Publisher");

    QtQuick2ApplicationViewer viewer;
    viewer.setMainQmlFile(QStringLiteral("qml/QQuickViewExample/main.qml"));
    viewer.showExpanded();

    return app.exec();
}

我的 main.qml 文件:

import QtQuick 2.0
import Components 1.0

Rectangle {
    id : testRect
    width: 360
    height: 360

    Image{
        anchors.fill: parent
        id: myImage

        Publisher {
            id: myPub

            onNewImage: {
                myImage.source = newImage;  #I know this doesnt work, it needs a QUrl and not a QImage
            }
        }
    }
}

推荐答案

换句话说，你有一个类发出带有 QImage 的信号，并且想用该图像更新 QML 中的项目?有多种解决方案，其中没有一个涉及将 QImage 转换为 QUrl"(无论如何，您肯定不需要获取携带图像数据的 data URL...)

In other words, you have a class emitting a signal carrying a QImage and want to update an item in QML with that image? There are various solutions, none of which involves "converting a QImage to a QUrl" (whatever that means, surely you don't need to get a data URL carrying your image data...)

这意味着您可以在 QML 文件中使用纯 Image 项.

This means you can use a plain Image item in your QML files.

  1. 创建一个QQuickImageProvider子类；给它一个 QImage 成员(提供者的图像)，覆盖 requestImage 以提供该图像(实际请求的 id 并不重要，请参阅下面)，以及一个接收 QImage 并更新成员的插槽.
  2. 将您的 Publisher 信号连接到您的提供商的插槽
  3. 通过QQmlEngine::addImageProvider将提供程序安装到QML引擎中(参见QQuickView::engine)；id 再次无关紧要，只需使用一个合理的

  4. 在 QML 中，只需使用带有类似源的普通 Image 元素

  1. Create a QQuickImageProvider subclass; give it a QImage member (the image to provider), override requestImage to provide that image (the actual id requested does not really matter, see below), and a slot that receives a QImage and updates the member.
  2. Connect your Publisher signal to your provider's slot
  3. Install the provider into the QML engine via QQmlEngine::addImageProvider (see QQuickView::engine); again the id does not really matter, just use a sensible one

  4. In QML, just use a plain Image element with a source like this

Image {
    id: myImage
    source: "image://providerIdPassedToAddImageProvider/foobar"
}

foobar 将被传递给您的提供者，但同样，这并不重要.

foobar will be passed to your provider, but again, it doesn't really matter.

我们快到了，我们现在只需要一种方法将图像更新推送到 QML 世界(否则 Image 将永远不知道何时更新自身).有关如何使用 Connections 元素和一点 JS.

We're almost there, we now only need a way to push the image updates to the QML world (otherwise Image will never know when to update itself). See my answer here for how to do that with a Connections element and a bit of JS.

请注意，通常您不需要将 Publisher 设为 QML 类型，您只需在 C++ 中创建 one 实例并将其通过QQmlContext::setContextProperty.

Note that in general you don't need to make Publisher a QML type, you just need to create one instance in C++ and expose it to the QML world via QQmlContext::setContextProperty.

使用自定义 Qt Quick 2 项目

QQuickPaintedItem 可能是最方便的工作，因为它提供了一个采用 QPainter 的 paint 方法.因此，大计划是

Use a custom Qt Quick 2 Item

QQuickPaintedItem is probably the most convenient for the job as it offers a paint method taking a QPainter. Hence the big plan is

  1. 子类QQuickPaintedItem:子类存储要绘制的QImage，并有一个设置新QImage的槽.此外，它的 paint 实现只是使用 QPainter::drawImage 来绘制图像.
  2. 通过 qmlRegisterType 将子类暴露给 QML 世界(以便您可以在 QML 中使用它)

  3. 想办法将携带新图像的信号连接到物品的插槽.

  1. Subclass QQuickPaintedItem: the subclass stores the QImage to be painted and has a slot that sets the new QImage. Also its paint implementation simply paints the image using QPainter::drawImage.
  2. Expose the subclass to the QML world via qmlRegisterType (so that you can use it in QML)

  3. Figure out a way to connect the signal carrying the new image to the items' slot.

这可能是棘手的部分.

要在 C++ 中执行连接，您需要一种方法来确定项目已创建(并获取指向它的指针)；通常通过将 objectName 属性分配给某个值，然后在根对象上使用 findChild 来做到这一点(由 QQuickView::rootObject()<返回/code>) 以获取指向项目本身的指针.然后你就可以像往常一样使用connect了.

To perform the connection in C++ you need a way to figure out that the item has been created (and get a pointer to it); usually one does this by means of assigning the objectName property to some value, then using findChild on the root object (as returned by QQuickView::rootObject()) to get a pointer to the item itself. Then you can use connect as usual.

或者，可以改为在 QML 中执行连接，就像上面一样，通过暴露给 QML 世界的发布者 C++ 对象上的 Connections 元素:

Or, could instead perform the connection in QML, just like above, via a Connections element on the publisher C++ object exposed to the QML world:

MyItem {
    id: myItem
}        

Connections {
    target: thePublisherObjectExposedFromC++
    onNewImage: myItem.setImage(image)
}

这具有无论何时创建 MyItem 实例都可以工作的优点；但我不能 100% 确定它会起作用，因为我不确定你是否可以处理 QML 中的 QImage 类型.

This has the advantage of working no matter when you create the MyItem instance; but I'm not 100% sure it will work because I'm not sure you can handle the QImage type in QML.

相关文章