SwiftUI中如何将图像裁剪显示在另一张图片的透明区域内

以下是两种原生SwiftUI实现方案，无需自定义UIImage合成逻辑：

方法1：反转alpha通道作为遮罩（推荐，逻辑直观） #

利用SwiftUI内置滤镜实现alpha通道反转，直接作为下层图片的遮罩：

ZStack {
    // 下层待裁剪的方形实心图片
    Image("source_square")
        .mask {
            // 六边形边框图片，做alpha反转处理
            Image("source_border")
                .luminanceToAlpha()
                .colorInvert()
        }
    // 上层叠加正常显示的六边形边框
    Image("source_border")
}

原理解释 #

• luminanceToAlpha()会将图片的亮度转换为alpha通道：白色（边框非透明区域）对应alpha=1，黑色（边框中心透明区域）对应alpha=0
• colorInvert()反转亮度：原边框非透明区域变为黑色（alpha=0，遮罩对应位置隐藏下层图片），原中心透明区域变为白色（alpha=1，遮罩对应位置显示下层图片），正好匹配需求

方法2：使用混合模式实现 #

你之前的混合模式方案失败有两个原因：拼写错误（把blendMode写成了blenMode）、未添加compositingGroup()限制混合作用范围，正确实现如下：

ZStack {
    // 下层待裁剪的方形实心图片
    Image("source_square")
    // 边框用于挖空下层图片
    Image("source_border")
        .blendMode(.destinationOut)
    // 上层叠加正常显示的六边形边框
    Image("source_border")
}
.compositingGroup() // 必须添加，限制混合仅在当前ZStack内部生效，避免与外部背景混合出现异常

原理解释 #

• .destinationOut混合模式规则：上层内容不透明的区域，会将下层对应位置的内容清除
• compositingGroup()将整个ZStack作为独立的渲染单元，混合操作不会影响ZStack外的内容，避免边框出现纯黑的异常

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