Color overlay an image in QML (Qt6)

Question

In QML for Qt5 I could use ColorOverlay to apply a color to an image.

But in Qt6, it no longer exists.

What is the best way to color an image in QML for Qt6?

Linus

Does this answer your question? QML QtGraphicalEffects is not Installed – Aileen

Qt6 still provides support for Graphics Effects, through the Qt5Compat.GraphicalEffects module. Alternatively, look into shader effects. – Aileen

Thanks, unfortunately I don't know how to install the qt5 compat module. I'm using Ubuntu Linux and I've only heard of a package on ArchLinux. – Linus

I've just noticed that you've already asked about that. I'd suggest you to look into shader effects, but in any case there is a package in experimental debian repos: packages.debian.org/experimental/… so you could try to install it (at your own risk). I'd also find means to submit a request to the Ubuntu repository mantainers (maybe through their irc channel or mailing list) and ask about its insertion or any suggestion. – Aileen

thanks i just ended up editing the svg files directly until the feature is supported – Linus

I'm afraid you've not understood the problem: the GraphicalEffects module of Qt5Compat is not temporarily there waiting for support, it's only provided to facilitate porting for backward compatibility with Qt5 (hence the name), and it doesn't even include all effects. Graphical Effects will not be supported otherwise, they are already considered partially obsolete (due to the shader/particle system), and it's also possible that in the years to come it will be actually declared as deprecated, meaning that the module will not be updated nor made available anymore for future releases of Qt6. – Aileen

Yes I understood thanks – Linus

There are ways to color an image without the need of QtGraphicalEffects. Can you tell us more about your requirements and perhaps we can provide a more concrete solution? Meanwhile, see my answer here https://mcmap.net/q/481431/-qml-change-image-color – Gunpoint

Warning, I found that combining Qt5Compat.GraphicalEffects and Qt6 on TI AM335x ARM boards causing the QSGRenderThread to crash. So maybe better just find some Qt6-based solutions. – Awhirl

Answer 1

Based on the comments to your question and my tinkering with it, I managed to found 2 ways of colouring an image/icon in Qt 6 QML:

1. Stephen Quan's solution - Simple, yet locked with centered layout

Achieved by using icon property of the Button class, for instance:

Button {
    // ... 

    icon.source:  "<IMAGE_SOURCE>"
    icon.color: "<IMAGE_COLOUR>"

    icon.width: <IMAGE_WIDTH>
    icon.height: <IMAGE_HEIGHT>

    // ...
}

Unfortunately, the image is centered both vertically and horizontally and it is unchangeable.

2. IconImage class - completely layout-wise customizable

The class provides color property out of the box, allowing you to easily change an image colour, while also enabling you to position it however you want because it is a separate class.

The following example demonstrates how it can be used to create more complex buttons, having e.g. both a text and an image, thanks to contentItem property:

Button {
    // ...

    contentItem: Item {
        id: content

        IconImage {
            id: <IMAGE_ID>
            source: "<IMAGE_SOURCE>"
            width: <IMAGE_WIDTH>
            height: <IMAGE_HEIGHT>
            color: "<IMAGE_COLOUR>"
        }

        // ...
        // other elements classes like Text, etc. 
        // ...
    }

    // ...
}

Summary

As usual, there is no "the best" solution to the problem. It is up to you to decide which one you very need. The first one is the simplest to setup while the second one is the most customizable.

Diderot