QML изменить цвет изображения

Question

Я искал, как раскрасить изображение (в формате svg или png ...).

Я попытался покрыть свое изображение прямоугольником, заполняющим изображение, но поскольку мое изображение не является прямоугольником, оно окрашивает весь прямоугольник, а не только изображение.

Можно ли изменить цвет изображения с помощью qml? В качестве альтернативы можно ли изменить цвет на qt (с C++) с помощью QPixmap, а затем интегрировать QPixmap на QML Item?

Благодарим за помощь. (Если нет решения, я должен загрузить другое изображение к тому же основному изображению с разным цветом.)

Answer 1

Вы можете использовать ColorOverlay из Qt 5.2 следующим образом:

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 
    } 
} 

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

Вышеупомянутый код превращает ваше изображение в серого, а затем применяет ваш цвет.