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

我在Internet上研究了该问题，并且发现很多ppl通过向.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.

提示:为了获得正确的视觉效果，请不要将sourceSize设置为比Image大小低(由于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屋！