QML items clone / duplicate

Question

I'm quite new to the Qt world, but can't find a solution for this problem. I've have a view using a repeater of Image + ColorOverlay. Rendering is quite slow, here is what I actually use :

Column {
    Repeater {
        model: 100
        Rectangle {
            width: 16; height: 16;
            color: "transparent"
            ColorOverlay {
                anchors.fill: parent
                source:
                Image {
                    fillMode: Image.PreserveAspectFit
                    smooth: true
                    visible: false
                    source: "image.png" // 16x16 png image
                }
                color: "#FF" + settings.mainColor.substr(1,6)
                cached: true
            }
        }
    }
}

If I remove the ColorOverlay part, and use only the image, it runs very fast. But I need to colorize the image :/

I tried to put all the ColorOverlay+Image in a new QML file and import it to make something like this :

Column {
    Repeater {
        model: 100
        Rectangle {
            width: 16; height: 16;
            color: "transparent"
            Icon {}
        }
    }
}

But it's still very slow with the ColorOverlay :/

[EDIT 1] : Also tried the classic "Image / ColorOverlay" hierarchy, same performance results

Column {
    Repeater {
        model: 100
        Rectangle {
            width: 16; height: 16;
            color: "transparent"
            Image {
                id: image
                fillMode: Image.PreserveAspectFit
                smooth: true
                visible: false
                source: "image.png" // 16x16 png image
            }
            ColorOverlay {
                anchors.fill: image
                source: image
                color: "#FF" + settings.mainColor.substr(1,6)
                cached: true
            }
        }
    }
}

Is there a way to "duplicate" or "clone" the item ? Or maybe save the first transformation to a new PNG file in a cache directory or something ? I'm open to any idea in QML or C++!

Thanks !

Have you tried enabling cache in the overlay? The parent/child hierarchy is also not what the docs suggest. — W.B., Sep 10 '14 at 13:26
Sorry forgot to mention that I tried the "classic" parent/child hiearchy, but same results. For the cache, "cached: true" is already in place on the ColorOverlay, are you talking about something else ? — Noth, Sep 10 '14 at 14:06
Yes, that's what I meant. I was reading your post on a mobile, which isn't a nice experience. I didn't notice `cached` in your listing. — W.B., Sep 10 '14 at 18:27

score 0 · Accepted Answer · answered Sep 11 '14 at 11:35

Found a workaround for this problem. Didn't find a way to duplicate an item, but I think this way of doing things will be more optimised (and it just works) :

Column {
    id: column
    width:100
    height:500
    Repeater {
        model: 100
        Rectangle {
            width: 16; height: 16;
            color: "transparent"
            Image {
                id: image
                fillMode: Image.PreserveAspectFit
                smooth: true
                source: "../../images/icons/worldmap/icon_map_vault.png"
            }
        }
    }
}
ColorOverlay {
    anchors.fill: column
    source: column
    color: "#FF" + settings.mainColor.substr(1,6)
    cached: true
}

score 0 · Answer 2 · answered Sep 04 '18 at 12:39

I had a similar problem, but I couldn't use your workaround (overlay the whole container).

I'm under the impression that:

Caching is slower than rendering (in case of this effect)
A cached image is generated even if cached is set to false, it just isn't used. If I'm wrong, then something else must be broken in Qt's ColorOverlay, because...:

I fixed the problem by writing FastColorOverlay.qml which seems to be much faster:

import QtQuick 2.10
import QtGraphicalEffects 1.0    

ShaderEffect {
           anchors.fill: commitedImage
           property variant source
           property color color
           visible: commited
           fragmentShader: "qrc:/qt-project.org/imports/QtGraphicalEffects/shaders/coloroverlay.frag"
}

It lacks the cached property, but otherwise performs very well for me.

QML items clone / duplicate

2 Answers2