SwiftUI视频裁剪视图：如何让中间区域透明显示缩略图？

完全可以实现这个需求，自定义裁剪形状是精准控制视图显示区域的最佳方案。我们可以创建一个自定义Shape，只保留左右各20pt、上下各5pt的边框部分，中间区域挖空，这样后方的缩略图就能透过透明区域显示出来。

实现步骤： #

1. 自定义裁剪形状
   创建遵循Shape协议的结构体，在path(in:)方法中绘制需要保留的边框路径，通过路径减法挖空中间区域：

struct CropFrameShape: Shape {
    let horizontalInset: CGFloat = 20
    let verticalInset: CGFloat = 5
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // 绘制外层圆角矩形（整个视图范围）
        let outerRect = rect.insetBy(dx: 0, dy: 0)
        path.addRoundedRect(in: outerRect, cornerSize: CGSize(width: 7, height: 7))
        
        // 绘制中间需要挖空的矩形
        let innerRect = rect.insetBy(dx: horizontalInset, dy: verticalInset)
        let innerPath = Path(roundedRect: innerRect, cornerRadius: 0)
        
        // 用evenOdd填充规则实现挖空
        path.addPath(innerPath, rule: .evenOdd)
        
        return path
    }
}

2. 调整视图层级与裁剪逻辑
   替换原有clipShape为自定义形状，同时用ZStack将缩略图放在裁剪视图后方：

var body: some View {
    ZStack {
        // 后方的缩略图（示例用颜色占位，实际替换为你的缩略图视图）
        Color.blue.opacity(0.5)
            .frame(width: 300, height: 70)
        
        HStack(spacing: 10) {
            Image(systemName: "chevron.compact.left")
                .frame(height:70)
            
            Spacer()
            
            Image(systemName: "chevron.compact.right")
        }
        .foregroundColor(.black)
        .font(.title3.weight(.semibold))
        .padding(.horizontal, 7)
        .padding(.vertical, 3)
        .background(.yellow)
        // 应用自定义裁剪形状
        .clipShape(CropFrameShape())
        .frame(width: 300)
        .onGeometryChange(for: CGFloat.self) { proxy in
            proxy.size.width
        } action: { width in
            print("width = \(width)")
        }
    }
}

关键说明： #

• 通过evenOdd填充规则，外层路径和内层路径组合后，中间区域会自动变为透明。
• ZStack确保缩略图处于裁剪视图的下层，透过透明区域可见。
• 可直接修改horizontalInset和verticalInset的值，调整保留边框的尺寸。

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