QML change image color

helene picture helene · May 30, 2013 · Viewed 13.6k times · Source

I searched for how to colorize an image (with the format svg or png ...).

I tried covering my image with a rectangle that fills the image, but as my image is not a rectangle it colorizes the whole rectangle and not just the image.

Is it possible to change image color with qml? Alternatively, is it possible to change the color on qt (with C++) with QPixmap then integrate the QPixmap on QML Item?

Thank you for your help. (If there is no solution, I will have to load a different image to the same basic image with different color.)

Answer

Nikolai Saiko picture Nikolai Saiko · Mar 31, 2014

You may use ColorOverlay from Qt 5.2 as follows:

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