QML项目克隆/重复

Question

我对Qt世界很陌生，但找不到解决这个问题的方法。我有一个使用图像+颜色叠加中继器的视图。渲染相当慢，以下是我实际使用的：

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

如果我删除ColorOverlay部分，只使用图像，它运行得很快。但我需要给图像上色：/

我试着把所有的ColorOverlay+图像放在一个新的QML文件中，并导入它来制作这样的东西：

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

但使用ColorOverlay仍然非常缓慢：/

[EDIT 1]：还尝试了经典的"图像/颜色叠加"层次结构，相同的性能结果

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

有没有办法"复制"或"克隆"项目？或者可能将第一个转换保存到缓存目录或其他目录中的新PNG文件？我对QML或C++中的任何想法都持开放态度！

谢谢！

Answer 1

找到了解决此问题的方法。没有找到复制项目的方法，但我认为这种做事方式会更加优化（而且它确实有效）：

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
}

Answer 2

我也遇到过类似的问题，但我无法使用您的解决方法（覆盖整个容器）。

我的印象是：

1. 缓存比渲染慢（在这种效果的情况下）
2. 即使cached设置为false，也会生成缓存的图像，只是不使用而已。如果我错了，那么Qt的ColorOverlay中一定有其他东西坏了，因为…：

我通过编写FastColorOverlay.qml解决了这个问题，它似乎快得多：

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

它缺少cached属性，但在其他方面对我来说表现非常好。