如何在SwiftUI中使用Path创建贝塞尔曲线复现类山脉阶梯背景

首先调整你的Shape实现逻辑：原有代码的贝塞尔曲线控制点设置在视图可见区域外（y坐标为负），所以看不到预期的曲线效果，我们可以改用相对视图尺寸的比例参数定义路径，适配不同屏幕尺寸，同时增加多段平缓起伏实现你要的效果：

struct MountainBackgroundShape: Shape {
    // 可调节参数：起伏高度占视图高度的比例
    var waveHeightRatio: CGFloat = 0.08
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 起点：视图左下角
        path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
        // 向上画到左侧起点，预留起伏空间
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY * (1 - waveHeightRatio)))
        
        // 第一段平缓凸起
        path.addCurve(to: CGPoint(x: rect.maxX * 0.33, y: rect.maxY * (1 - waveHeightRatio * 0.7)),
                      control1: CGPoint(x: rect.maxX * 0.15, y: rect.maxY * (1 - waveHeightRatio * 1.2)),
                      control2: CGPoint(x: rect.maxX * 0.22, y: rect.maxY * (1 - waveHeightRatio * 0.3)))
        
        // 第二段平缓凸起
        path.addCurve(to: CGPoint(x: rect.maxX * 0.66, y: rect.maxY * (1 - waveHeightRatio * 1.1)),
                      control1: CGPoint(x: rect.maxX * 0.44, y: rect.maxY * (1 - waveHeightRatio * 1.2)),
                      control2: CGPoint(x: rect.maxX * 0.55, y: rect.maxY * (1 - waveHeightRatio * 0.2)))
        
        // 第三段回到右侧高度
        path.addCurve(to: CGPoint(x: rect.maxX, y: rect.maxY * (1 - waveHeightRatio * 0.6)),
                      control1: CGPoint(x: rect.maxX * 0.78, y: rect.maxY * (1 - waveHeightRatio * 1.3)),
                      control2: CGPoint(x: rect.maxX * 0.9, y: rect.maxY * (1 - waveHeightRatio * 0.4)))
        
        // 闭合路径：画到右下角再回到起点
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.closeSubpath()
        
        return path
    }
}

使用方式 #

将该Shape作为背景放到视图底层，调低透明度即可实现示例中不显眼的背景效果：

struct DemoView: View {
    var body: some View {
        ZStack {
            // 背景山脉图案
            MountainBackgroundShape()
                .fill(.gray.opacity(0.15))
                .ignoresSafeArea()
            
            // 你原本的其他页面内容
            Text("页面内容")
                .font(.title)
        }
    }
}

效果调整说明 #

• 调整waveHeightRatio参数可以修改山脉起伏的整体高度，数值越大起伏越明显
• 修改每一段addCurve的控制点y坐标，可以单独调整每一段凸起的高度和弧度，要更平缓就缩小控制点和对应路径点的y值差，要更陡峭就放大差值

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