Question

我正在尝试在Qt-QML（用于桌面）中设计一个概要面板。界面应该以固定的分辨率使用，所以我更喜欢将PNG图像用于不同的图形元素来创建模式（管道，管道曲线，管道，泵，阀门等）。现在问题是如何改变不同组件的填充颜色：我希望用户可以选择颜色（在实际情况下可以使用不同的液体），但我无法在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桌面下编译。现在可以在synoptic的任何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 streched。最终屏幕的一个例子可以是这样的：

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

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

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

最终结果，如果'active'属性为true且所选颜色为绿色，则可能是这样的：

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

Answer 2

PNG和SVG图像都支持alpha通道（即透明度），所以，为什么不在你的PNG背景上放置你的SVG（透明部分，你想看到你的背景）？

甚至反过来......你可以在你的SVG图像上放置PNG部件（带有透明“孔”）。

Answer 3

我遇到了同样的问题，最终创建了一个自定义图像渲染器，该图像渲染器将可选的color参数作为图像源字符串的一部分，然后在渲染之前替换了原始颜色。看起来比仅渲染图像更有效。

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

3 个答案: