4

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

（编辑更好地解释）

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

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

4

3 回答 3

3

找到的唯一解决方案是使用“ 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，掩码图像用于定义 Rectangle 的可见区域（颜色为“x”），放置在主组件的背景图像上。2 个组件背景和蒙版图像的示例：

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

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

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

于 2013-03-06T20:47:05.543 回答
0

PNG 和 SVG 图像都支持 alpha 通道（即透明度），那么，为什么不将 SVG（在您想看到背景的地方带有透明部分）放在 PNG 背景上呢？

甚至反过来……您可以将 PNG 部分（带有透明“孔”）放在 SVG 图像上。

于 2013-03-06T08:14:28.580 回答
0

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

于 2018-07-10T14:58:19.653 回答