使用QML隐藏/显示SVG文件的部分

4
我的设计师为我们的HMI提供了SVG文件,我们一直在思考如何优化这些图像的渲染。他想避免制作大量几乎相同的SVG文件。
以Wi-Fi图标为例:

enter image description here

我们希望使用一个 SVG 文件来显示或隐藏每个条形图,而不是使用 3 个 SVG 文件来显示整个 Wi-Fi 接收范围。在 QML 中是否可能实现这一点?请注意保留 HTML 标签。

QML 的角度来看,我们是否可以通过修改 XML 代码并重新加载文件来实现这一点?

我们应该使用遮罩吗?

编辑:我刚刚发现了 QSVGRenderer 类。由于我从我的 C ++ 模型中获取 Wi-Fi 电源值,因此我也许可以利用后端来修改 SVG 文件的 XML 内容并重新加载它?


好问题。如果条纹具有更简单的图案,比如矩形,那么它就很容易处理了,但是由于这样的曲线线条... - vahancho
2
我认为你陷入了过早优化的困境。在匆忙增加复杂性来解决问题之前,你是否已经确定了自己的问题?此外,这个链接 https://stackoverflow.com/questions/40821020/rasterize-qml-svg-image-in-alpha8-format/40822538#40822538 - dtech
目前的解决方案是有效的。正如我所说,这更多是一个人类问题,因为我们的HMIs可能会接收到许多更新,而我们只有一位设计师来处理所有这些变化。 - Grégoire Borel
1
在图形设计方面解决问题要容易得多。所涉及的图标由3个元素组成,设计师可以将其导出为3个图像,逐步显示完整的图标。然后,您就有了每种情况下的具体图标,这比在每个图标上增加额外的编程逻辑来进行额外的技巧要简单得多。 - dtech
2个回答

0
也许你可以使用 Qt 图形效果中的 OpacityMask

0

我同意 dtech 的评论。

同时请注意,SVG 渲染不是 Qt 最擅长的领域。如果您不需要成千上万种大小的图像,请考虑使用非矢量图形格式。

如果您希望将所有内容放在一个文件中,可以尝试调整 SpriteAnimatedImage 以从一个图像中选择正确的“帧”,其中包含所有变化。

我目前无法尝试,但 Sprite 也可能能够处理 SVG。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接