C

Qt Quick Ultralite 图像加载示例

演示如何运行时加载图像。

概述

该示例演示了如何使用 Qul::ImageProviderQul::Image 在运行时创建和显示图像。

当按下“加载新!”按钮时,屏幕中间的条形国旗图像将呈现随机着色。

目标平台

项目结构

CMake 项目文件

将 FreeRTOS configTOTAL_HEAP_SIZE 变量设置为一个值,足以在堆上存储图像。

if (QUL_OS STREQUAL "FreeRTOS" AND NOT QUL_PLATFORM MATCHES "^mimxrt1170")
    qul_override_freertos_heap_size(image_loading "300 * 1024")
endif()

应用程序必须注册一个自定义图像提供者。这在与 BareMetalFreeRTOSmain() 函数中实施

if (QUL_OS STREQUAL "FreeRTOS")
    target_sources(image_loading PRIVATE
                   main_freertos.cpp
    )
else()
    target_sources(image_loading PRIVATE
                   main_baremetal.cpp
    )
endif()
应用程序 UI

image_loading.qml 文件定义用户界面。

使用具有其 source 属性设置为图像提供者 URI 的 Image 项显示动态图像。

        Image {
            anchors.horizontalCenter: parent.horizontalCenter

            // Trigger a new image to be loaded when root.imageName changes
            source: "image://myimageprovider/" + root.imageName
            width: 120
            height: 120
        }
图像提供者

myimageloader.hmyimageloader.cpp 中实现了 MyImageProvider 图像提供者。

在开始更新图像的写入操作之前,MyImageProvider::requestImage() 方法首先解析图像 URI,分配一个新的 Qul::Image 并对其进行写入准备的相应操作

Qul::SharedImage MyImageProvider::requestImage(const char *imageName, size_t imageNameLength)
{
    if (imageNameLength < 8)
        return Qul::SharedImage();

    // Parse the image name to determine the colors to use for the image
    colors[0] = imageName[5] - '0';
    colors[1] = imageName[6] - '0';
    colors[2] = imageName[7] - '0';

    loadSteps = 3;
    currentLoadStep = 0;

    // Create the image and mark it as being-written-to
    Qul::Image img(120, 120, Qul::PixelFormat_RGB16);
    sharedImage = img;
    img.beginWrite();

它启动写入操作以随着时间的推移更新图像。在示例中,这是通过计时器完成的。在实际应用中,应用程序可以启动异步进程以获取和解析图像,或者对图像执行绘图操作。

写入操作完成后,向 Qul::EventQueue 发送事件,通知图像已准备就绪。

void MyImageProvider::onEvent(MyImageLoadedEvent *const &event)
{
    // Causes the finished image to become visible.
    event->sharedImage.image()->endWrite();
    Qul::PlatformInterface::qul_delete(event);
}

main() 函数中注册了应用程序的图像提供者。

int main()
{
    Qul::initHardware();
    MyImageProvider myImageProvider;
    Qul::Application app;
    app.addImageProvider("myimageprovider", &myImageProvider);
    ...

文件

参见Qul::ImageQul::SharedImageQul::ImageProvider

在某些Qt许可下可用。
了解更多信息。