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

Question

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

（编辑更好地解释）

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

（编辑解决方案）经过很多小时，除了使用 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 拉伸的。最终屏幕的示例可能如下所示：

示例1 http://imageshack.us/a/img9/2968/example1c.png。

所有组件还有一个 MaskedItem，遮罩图像用于定义矩形的可见区域（颜色为“x”），放置在主组件的背景图像上。2 个组件背景和遮罩图像的示例：

示例3 http://imageshack.us/a/img442/9863/example3y.png。

如果“active”属性为 true 并且所选颜色为绿色，最终结果可能如下所示：

示例2 http://imageshack.us/a/img836/1968/example2c.png。