qt - 需要在 QML 中更改 SVG 图像的颜色

Question

我正在尝试在 Qt-QML 中设计一个概要面板(用于桌面)。该界面应使用固定分辨率，因此我更喜欢为不同的图形元素使用 PNG 图像来创建模式(管道、管道曲线、管道-t、泵、阀门等)。
现在的问题是如何更改不同组件的填充颜色:我希望用户可以选择颜色(在实际情况下可以使用不同的液体)，但我在 QML 中找不到如何做到这一点。
我想用我的 PNG 组件作为背景，然后画一个矩形，用 SVG 掩码遮盖。但在网上我只能找到 qt-components “MaskedItem” 不适用于桌面。我想知道是否没有办法在我的 PNG 上放置一种颜色(黑色和透明)的 SVG 图像，然后在 QML 中更改它的颜色属性。
有人有什么想法吗？非常感谢。

( 编辑 更好地解释)

这个问题比我能解释的更复杂。
我创建了几个具有特定属性的 QML 组件，每个组件都有一个透明的背景图像 (PNG)。现在，当主 QML 处于特定状态(由 Qt 应用程序设置)时，我需要使用可变颜色“x”填充 PNG 图像的定义区域。
我的问题是:如何用 QML 中的可变颜色填充 PNG/SVG 的区域？我需要的是放置我的“背景”图像，然后在这个“矩形”组件(颜色“x”)上应用，最后在这个矩形上放置一个 mask ，以定义它的哪些区域必须是可见的，保留背景(之前的底部图像)。
我希望我现在能更好地解释自己。

( 编辑 解决方案)
很多小时后，除了使用 qt-components MaskedItem 之外，我找不到任何其他解决方案。下面我发布了我使用的解决方案。
感谢大家的关注。

Answer 1

找到的唯一解决方案是使用“ qt-components MaskedItem ”；它必须取自存储库，并且必须在 Qt 桌面下编译。现在可以在概要的任何 QML 组件中使用 MaskedItem。组件的 QML 代码将是这样的:

Item
{
    id: arrow
    property int  rotate: 0
    property bool active: false
    width: 32
    height: 32
    clip: true

    Image {
        smooth: true
        source: {
            if(rotate==90)
                "../res/arrow_1_bg.png"
            else if(rotate==180)
                "../res/arrow_2_bg.png"
            else if(rotate==270)
                "../res/arrow_3_bg.png"
            else
                "../res/arrow_0_bg.png"
        }
    }

    MaskedItem
    {
        visible: active
        anchors.fill: parent
        mask: Image
        {
            anchors.fill: parent
            smooth: true
            source: {
                if(rotate==90)
                    "../res/arrow_1_mask.png"
                else if(rotate==180)
                    "../res/arrow_2_mask.png"
                else if(rotate==270)
                    "../res/arrow_3_mask.png"
                else
                    "../res/arrow_0_mask.png"
            }
        }
        Rectangle
        {
            anchors.fill: parent
            color: active_color
            opacity: .6
        }
    }

} // Item: arrow

'active' 属性表示组件是否必须“填充”，使用主 QML 中定义的全局属性“active_color”。

因此，所有组件(管道、管道角度、箭头、泵、阀门等)都有一个透明的背景图像 (PNG)。管道(具有“方向”属性，水平或垂直)是 PNG 1x32px 拉伸(stretch)的。最终屏幕的示例可能是这样的:

example1 http://imageshack.us/a/img9/2968/example1c.png .

所有组件也都有一个 MaskedItem，掩码图像用于定义 Rectangle 的可见区域(颜色为“x”)，放置在主组件的背景图像上。 2 个组件背景和蒙版图像的示例:

example3 http://imageshack.us/a/img442/9863/example3y.png .

最终结果，如果 'active' 属性为真并且选择的颜色为绿色，则可能是这样的:

example2 http://imageshack.us/a/img836/1968/example2c.png .