使用 Blend QML Type 处理不同大小的图像

Question

QML Blend Type 文档中列出的示例展示了如何将两个图像混合在一起。如何在处理不同大小的图像时达到相同的效果？

我有一张全高清分辨率的背景图片，上面有一些较小的组件需要融入其中。但是，使用文档中显示的方法将背景缩小到与组件相同的大小。

这是我正在使用的代码，改编自上面链接中的示例。

import QtQuick 2.12
import QtGraphicalEffects 1.12

Item {
    width: 300
    height: 300

    Image {
        id: backgroundImg
        source: "path/to/backgroundImg"
        
        // Set true because I want the background image
        // and blended component to both show up.
        visible: true
    }

    Image {
        id: component1
        source: "path/to/component1"
        visible: false
    }

    Blend {
        anchors.fill: component1
        source: backgroundImg
        foregroundSource: component1
        mode: "color"
    }
}

Answer 1

您可以使用与背景图像一样大的

Item

，并将前景图像放在其中。使用

Item

作为

foregroundSource

.

这样您就不需要背景图像可见，因为没有图像的边缘没有完全混合以暴露背景图像。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.12

Window {
    id: root
    width: 640
    height: 480
    visible: true

    Image {
        id: background
        source: "https://picsum.photos/id/485/640/480"
        visible: false
    }

    Item {
        id: foreground
        anchors.fill: background
        visible: false

        Image {
            anchors.centerIn: parent
            source: "https://picsum.photos/id/486/260/320"
        }
    }

    Blend {
        anchors.fill: parent
        source: background
        foregroundSource: foreground
        mode: "lighten"
    }
}