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

2021-12-09 00:00:00 qt qml c++

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

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

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

感谢您的帮助！

编辑 1:

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

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

类发布者{Q_OBJECT民众:发布者(QObject* parent = 0);虚拟?发布者(无效)；Q_信号:void newImage(const QImage& newImage);};

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

我的 main.cpp 文件:

int main(int argc, char *argv[]){QGuiApplication app(argc, argv);qmlRegisterType("组件", 1, 0, "Publisher");QtQuick2ApplicationViewer 查看器；viewer.setMainQmlFile(QStringLiteral("qml/QQuickViewExample/main.qml"));查看器.showExpanded();返回 app.exec();}

我的 main.qml 文件:

导入QtQuick 2.0导入组件 1.0长方形 {id : testRect宽度:360高度:360图片{anchors.fill:父级编号:myImage出版商{编号:myPubonNewImage:{myImage.source = newImage;#我知道这行不通，它需要一个 QUrl 而不是 QImage}}}}

解决方案

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

使用图像提供程序

这意味着您可以在 QML 文件中使用普通的 Image 项目.

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

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

    图片{编号:myImage来源:图像://providerIdPassedToAddImageProvider/foobar"}

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

  5. 我们快到了，我们现在只需要一种方法将图像更新推送到 QML 世界(否则图像将永远不知道何时更新自己).请参阅我的回答，了解如何使用Connections 元素和一点 JS.

    请注意，通常您不需要使 Publisher 成为 QML 类型，您只需要在 C++ 中创建 一个 实例并通过以下方式将其公开给 QML 世界QQmlContext::setContextProperty.

使用自定义 Qt Quick 2 项目

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

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

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

    这可能是棘手的部分.

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

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

    MyItem {编号:我的项目}连接{目标: thePublisherObjectExposedFromC++onNewImage: myItem.setImage(image)}

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

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

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. Edit4: 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.

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.

Thanks for your help!

Edit1:

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.

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);
};

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

my main.cpp file:

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();
}

my main.qml file:

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
            }
        }
    }
}

解决方案

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...)

Use an image provider

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

  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 will be passed to your provider, but again, it doesn't really matter.

  5. 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.

    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.

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. 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.

    This might be the tricky part.

    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.

    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)
}

    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.

相关文章