SwiftUI中如何清除GraphicsContext绘制的矩形？

Color.clear填充无效的原因很直接：它是完全透明的颜色，不会改变已有像素，只是让该区域保留原来的内容。要实现清除效果，有两种实用方案：

方法一：用状态控制Canvas渲染（声明式方案） #

这是最贴合SwiftUI设计思路的方式，通过状态变量控制是否绘制目标矩形，本质是让Canvas重新渲染时不绘制该内容，达到“清除”的效果。

示例代码：

struct ContentView: View {
    @State private var showGreenRect = true
    
    var body: some View {
        Canvas { context, size in
            // 根据状态决定是否绘制绿色矩形
            if showGreenRect {
                context.fill(
                    Path(CGRect(x: 0, y: 0, width: 300, height: 200)),
                    with: .color(.green)
                )
            }
        }
        .frame(width: 300, height: 200)
        .onTapGesture {
            showGreenRect.toggle() // 点击切换显示/隐藏
        }
    }
}

方法二：使用混合模式擦除局部内容 #

如果需要动态清除局部区域（比如动画擦除），可以用destinationOut混合模式，它会擦除绘制路径覆盖的原有内容。

示例代码：

Canvas { context, size in
    // 先绘制绿色矩形
    context.fill(
        Path(CGRect(x: 0, y: 0, width: 300, height: 200)),
        with: .color(.green)
    )
    
    // 设置混合模式为destinationOut，擦除目标区域
    context.blendMode = .destinationOut
    context.fill(
        Path(CGRect(x: 0, y: 0, width: 300, height: 200)),
        with: .color(.black) // 只要是非透明色即可，颜色本身不影响
    )
    // 记得恢复默认混合模式，避免影响后续绘制
    context.blendMode = .normal
}
.frame(width: 300, height: 200)

补充说明 #

• 简单的显示/隐藏场景优先用方法一，代码更简洁，符合SwiftUI的声明式逻辑。
• 动态擦除或局部清除场景用方法二，灵活性更高，但要注意恢复混合模式，避免后续绘制出错。

内容的提问来源于stack exchange，提问作者雨夜带刀