QML改变图像颜色答案

【问题标题】：QML change image colorQML改变图像颜色
【发布时间】：2013-05-26 04:58:38
【问题描述】：

我搜索了如何为图像着色（格式为 svg 或 png ...）。

我尝试用填充图像的矩形覆盖我的图像，但由于我的图像不是矩形，它会着色整个矩形而不仅仅是图像。

是否可以使用 qml 更改图像颜色？或者，是否可以使用 QPixmap 更改 qt（使用 C++）上的颜色，然后将 QPixmap 集成到 QML Item 上？

感谢您的帮助。（如果没有解决方案，我将不得不将不同的图像加载到具有不同颜色的相同基本图像。）

【问题讨论】：

标签： image qt colors svg qml

【解决方案1】：

在 Qt 5（从 5.2 开始）中，您可以使用 ColorOverlay，如下所示：

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 300
    height: 300

    Image {
        id: bug
        source: "images/butterfly.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    ColorOverlay {
        anchors.fill: bug
        source: bug
        color: "#ff0000"  // make image like it lays under red glass 
    }
 }

在 Qt 6 模块中，QtGraphicalEffects（包括 ColorOverlay）因licensing issues 而被删除。

在 Qt 6.1 中，GraphicalEffects 现在再次可用，@SCP3008 在下面评论

【讨论】：

可用文档：Qt ColorOverlay QML
ColorOverlay 在 QT 6 中不存在。
整个 QtGraphicalEffects 模块已从 Qt 6 中删除。他们不再使用它并且是 relicensing over to BSD，如果需要 Qt 6，ShaderEffects 可能是 ATM 的最佳解决方法@AmirSaniyan
GraphicalEffects 现在在 Qt 6.1 中再次可用，尽管现在在不同的模块下：here ColorOverlay 等组件略有修改，例如不再具有 samples 属性

【解决方案2】：

你也可以使用Colorize

而与 ColorOverlay 的区别在于： Colorize 真的可以用 HSL 改变图像的颜色，它更适合我。 ColorOverlay 类似于将彩色玻璃放在具有 RGBA 的灰度图像上时发生的情况。

import QtQuick 2.12
import QtGraphicalEffects 1.12

Item {
    width: 300
    height: 300

    Image {
        id: bug
        source: "images/bug.jpg"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    Colorize {
        anchors.fill: bug
        source: bug
        hue: 0.0
        saturation: 0.5
        lightness: -0.2
    }
}

【讨论】：

【解决方案3】：

您可以使用ShaderEffect 替换您的图像颜色。

ShaderEffect {
    property variant src: yourImage

    property real r: yourColor.r * yourColor.a
    property real g: yourColor.g * yourColor.a
    property real b: yourColor.b * yourColor.a

    width: yourImage.width
    height: yourImage.height

    vertexShader: "
        uniform highp mat4 qt_Matrix;
        attribute highp vec4 qt_Vertex;
        attribute highp vec2 qt_MultiTexCoord0;
        varying highp vec2 coord;

        void main() {
            coord = qt_MultiTexCoord0;
            gl_Position = qt_Matrix * qt_Vertex;
        }
    "

    fragmentShader: "
        varying highp vec2 coord;
        uniform sampler2D src;

        uniform lowp float r;
        uniform lowp float g;
        uniform lowp float b;

        void main() {
            lowp vec4 clr = texture2D(src, coord);
            lowp float avg = (clr.r + clr.g + clr.b) / 3.;
            gl_FragColor = vec4(r * avg, g * avg, b * avg, clr.a);
        }
    "
}

上面的代码将您的图像转换为灰度图像，然后应用您的颜色。

【讨论】：