QML 不显示 svg 图像 [英] QML doesn't show svg images

问题描述

我编写了一个简单的 QML ui，它使用了一些 svg 图像.当我在桌面上执行应用程序时，一切都很好，UI 和 svg 图像都会显示出来.当我尝试在嵌入式设备上执行应用程序(运行嵌入式 Windows)时，就会出现问题.在这种情况下，会显示 UI，但未显示 svg 图像，并且在控制台上我收到以下消息:QML BorderImage:无效的图像数据:my_image.svg

I wrote a simple QML ui that is using some svg images. When I execute the app on my desktop everything is fine, the UI is shown and also the svg images on it. The problem happens when I try to execute the app on an embedded device (running windows embedded). In this case the UI is displayed but the svg images are not shown and on the console I'm getting the following message: QML BorderImage: Invalid image data: my_image.svg

正确显示的是 png 图像.

The png images are shown correctly instead.

我在互联网上研究了这个问题，我发现很多人通过在 .pro 文件中添加 svg 和其他依赖项来解决这个问题.不幸的是，这对我没有帮助.这些是我的 .pro 文件的内容:

I research the problem over the Internet and I've found a lot of ppl that had solve the issue by adding svg and other dependencies to the .pro file. Unfortunately this didn't help in my case. Those are the contents of my .pro file:

TEMPLATE = app

QT += qml quick widgets svg xml gui core

QTPLUGIN += qsvg

SOURCES += main.cpp 
    SignalProcessor.cpp 
    PopupMode.cpp 
    BasicToolbarModel.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Default rules for deployment.
include(deployment.pri)

HEADERS += 
    SignalProcessor.h 
    PopupMode.h 
    BasicToolbarModel.h

CONFIG += qmltestcase

QUICK_TEST_SOURCE_DIR += Tests

DISTFILES += 
    qml/main.qml 
    qml/CustomToolBar.qml 
    qml/components/BatteryStatus.qml 
    qml/components/ImageButton.qml 
    qml/components/Popup.qml 
    qml/components/WifiStatus.qml 
    qml/pages/PlayButtonView.qml 
    qml/pages/StopButtonView.qml 
    qml/tests/tst_CustomToolBar.qml 
    qml/tests/tst_WifiStatus.qml 
    scripts/Utils.js

所有的 svg 图像都位于资源文件中

all the svg images are located inside the resource file

推荐答案

为了显示 SVG 图像，我做了以下工作:

In order to display an SVG image, I've done the following :

将svg添加到.pro文件中:

QT += svg

确保我的 Image 有大小:

    height: 400
    width: 400

确保我将源 SVG 设置为大小:

Ensured that I set the source SVG a size :

sourceSize.width: 100
sourceSize.height: 100

就是这样.

当我忘记了 QML 文件中的内容时，我会收到如下警告:

When I have forgotten things in my QML file, I have had warnings like :

W/libnotification.so( 3800): (null):0 ((null)): QOpenGLShaderProgram: could not create shader program
W/libnotification.so( 3800): (null):0 ((null)): QOpenGLShader: could not create shader

修复QML后，模拟器还在报错:

After fixing the QML, the emulator was still complaining :

E/OpenGLRenderer( 4435): GL error:  GL_INVALID_VALUE

我必须重新启动模拟器才能让它再次显示.

I had to restart the emulator in order to have it display something again.

提示:为了获得正确的视觉质量，与 Image 大小相比，不要将 sourceSize 设置得太低(上面的示例可能会给出难看的结果，因为x4 因子).

Tip : in order to have a correct visual quality, do not set sourceSize too low compared to the Image size (the above example can give ugly results because of the x4 factor).

(我正在 Android 模拟器上使用 Qt 5.7 进行测试).

(I'm testing with Qt 5.7 on an Android emulator).

这篇关于QML 不显示 svg 图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！