QML: Colorear una imagen con QtGraphicalEffects

Ya he hablado en numerosas ocasiones de Qt y en esta ocasión, con un simple ejemplo vamos a ver cómo es posible colorear una imagen mediante programación en QML usando el módulo QtGraphicalEffects y ColorOverlay.

El ejemplo

Creamos un archivo llamado imagen.qml y ponemos en el:

import QtQuick 2.0
import QtGraphicalEffects 1.0
 
Item {
    width: 300
    height: 300
 
    Image {
        id: imagen
        source: "imagen-a-colorear.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }
 
    ColorOverlay {
        anchors.fill: imagen
        source: imagen
        color: "#000000"
    }
 }

A continuación, en el mismo directorio, guardamos una imagen y la renombramos por imagen-a-colorear.png para que la coja el archivo QML.

Guardamos y lo ejecutamos:

qmlscene imagen.qml

Veremos como la imagen original ahora es coloreada con el color hexadecimal definido en ColorOverlay, en esta ocasión, el negro.