首页 文章

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

提问于
浏览 次
3

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

（ EDIT 更好解释）

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

（ EDIT 解决方案）经过很长时间，我找不到任何其他解决方案，而不是使用qt-components MaskedItem . 下面我发布了我用过的解决方案 . 感谢大家的兴趣 .

qt qml

3 回答

  • 0

    找到的唯一解决方案是使用“ 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 .

    回复于
  • 3

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

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

    回复于
  • 0

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

    回复于

相关问题