SwiftUI中使用Paths绘制边缘平滑圆弧的问题求助

云原生阿岚

2026-10-3

你当前实现出现生硬拐点的核心原因是圆弧绘制方向和二次曲线切线方向不匹配，两段路径衔接处斜率突变。你设置的clockwise: true会让圆弧向下凸，和两端二次曲线的衔接切线方向刚好相反，同时建议用GeometryReader替代UIScreen的全局尺寸，适配不同布局场景。

修正后可直接运行的代码：

struct SmoothArcExample: View {
    var body: some View {
        GeometryReader { proxy in
            Path { path in
                let midX = proxy.size.width / 2
                // 底部基准线参数
                let baseLeft = CGPoint(x: midX - 10, y: .zero)
                let baseRight = CGPoint(x: midX + 30, y: .zero)
                // 二次贝塞尔控制点
                let ctrlLeft = CGPoint(x: midX, y: .zero)
                let ctrlRight = CGPoint(x: midX + 20, y: .zero)
                // 圆弧两端端点
                let arcLeft = CGPoint(x: midX, y: 10)
                let arcRight = CGPoint(x: midX + 20, y: 10)
                // 圆弧中心点
                let arcCenter = CGPoint(x: midX + 10, y: 10)
                
                path.move(to: .zero)
                path.addLine(to: baseLeft)
                path.addQuadCurve(to: arcLeft, control: ctrlLeft)
                // *将clockwise修改为false，绘制上凸半圆，匹配两侧曲线的切线方向*
                path.addArc(center: arcCenter, radius: 10, startAngle: .degrees(180), endAngle: .degrees(0), clockwise: false)
                path.addQuadCurve(to: baseRight, control: ctrlRight)
                path.addLine(to: CGPoint(x: proxy.size.width, y: .zero))
            }
            .stroke(lineWidth: 2)
        }
        .frame(height: 20)
    }
}