image - QML 画像の色を変更

Question

画像に色を付ける方法を検索しました（svgまたはpngの形式で...）。

画像を塗りつぶす長方形で画像を覆おうとしましたが、私の画像は長方形ではないため、画像だけでなく長方形全体に色が付けられます。

qmlで画像の色を変えることはできますか? または、qt (C++ を使用) の色を QPixmap で変更し、QPixmap を QML アイテムに統合することは可能ですか?

ご協力ありがとうございました。(解決策がない場合は、同じ基本イメージに別のイメージを別の色でロードする必要があります。)

Answer 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により削除されました。

@SCP3008が以下にコメントしたように、Qt 6.1ではGraphicalEffectsが再び利用可能になりました

Answer 2

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);
        }
    "
}

上記のコードは、画像をグレースケールに変換してから、色を適用します。