如何使用QML Blend类型融合不同尺寸的图像？

你遇到的问题核心是Blend的尺寸被绑定到了小型组件上，导致背景图被强制缩放到组件尺寸。要实现FHD背景图和小型组件的融合，只需调整Blend的尺寸绑定目标，并确保前景组件在背景图上正确定位：

修改后的代码 #

import QtQuick 2.12
import QtGraphicalEffects 1.12

Item {
    // 容器自动匹配背景图的原始尺寸
    width: backgroundImg.sourceSize.width
    height: backgroundImg.sourceSize.height

    Image {
        id: backgroundImg
        source: "path/to/backgroundImg"
        anchors.fill: parent
        visible: false // 无需直接显示，Blend会调用它作为源图
    }

    Image {
        id: component1
        source: "path/to/component1"
        visible: false
        // 自定义组件在背景图上的位置（示例为居中）
        x: (parent.width - width) / 2
        y: (parent.height - height) / 2
    }

    Blend {
        anchors.fill: backgroundImg // 让Blend尺寸与背景图一致
        source: backgroundImg
        foregroundSource: component1
        mode: "color"
    }
}

关键调整说明 #

1. 容器尺寸匹配背景图：通过width: backgroundImg.sourceSize.width让外层容器自动适配背景图的原始分辨率，避免背景图被拉伸或压缩。
2. Blend绑定背景图尺寸：将anchors.fill的目标从component1改为backgroundImg，确保背景图能完整显示，不会被缩放到组件大小。
3. 组件定位：通过x和y属性设置小型组件在背景图上的显示位置，示例中为居中，你可以根据需求自定义坐标。

如果需要更灵活的前景控制（比如组件可拖动、局部裁剪），可以用ShaderEffectSource包裹组件，精确捕获组件区域：

ShaderEffectSource {
    id: componentSource
    sourceItem: component1
    captureRect: Qt.rect(0, 0, component1.width, component1.height)
    x: component1.x
    y: component1.y
}

之后将Blend的foregroundSource替换为componentSource即可。

内容的提问来源于stack exchange，提问作者Mohammad Ali