Question

我对Qt世界很陌生，但无法找到解决此问题的方法。我有一个使用Image + ColorOverlay转发器的视图。渲染很慢，这是我实际使用的：

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 + Image放入一个新的QML文件中并导入它以生成如下内容：

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

但ColorOverlay的速度仍然很慢：/

[编辑1]：还尝试了经典＆＃34; Image / ColorOverlay＆＃34;层次结构，相同的绩效结果

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

有没有办法重复＆＃34;重复＆＃34;或＆＃34;克隆＆＃34;这个项目？或者可能将第一个转换保存到缓存目录中的新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

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

我的印象是：

缓存比渲染慢（在这种情况下）
即使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属性，但对我来说效果很好。

QML项目克隆/复制

2 个答案: