UIKit自定义Shape无法实现更弯曲弧形，求助解决方案

问题描述 #

尝试了所有方法都达不到预期效果，甚至怀疑需求无法实现：当前的半圆过于尖锐，做不出更圆润的样式；无论怎么调整，中间的弧形都没法更弯曲（对应原代码里的c4部分）。

• 当前效果：顶部中间弧形尖锐，弯曲度不足
• 预期效果：顶部中间有一个更圆润、弯曲度更大的内凹弧形

优化后的代码 #

struct TabBarShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // 调整中间弧形的半径，让弯曲度更明显
        let middleArcRadius: CGFloat = rect.height * 1.5
        let cornerRadius: CGFloat = 12.0
        
        // 四个圆角的圆心
        let topLeftCornerCenter = CGPoint(x: rect.minX + cornerRadius, y: rect.minY + cornerRadius)
        let topRightCornerCenter = CGPoint(x: rect.maxX - cornerRadius, y: rect.minY + cornerRadius)
        let bottomRightCornerCenter = CGPoint(x: rect.maxX - cornerRadius, y: rect.maxY - cornerRadius)
        let bottomLeftCornerCenter = CGPoint(x: rect.minX + cornerRadius, y: rect.maxY - cornerRadius)
        
        // 1. 从左上角圆角的起始点开始
        path.move(to: CGPoint(x: rect.minX, y: rect.minY + cornerRadius))
        
        // 左上角圆角
        path.addArc(center: topLeftCornerCenter, 
                    radius: cornerRadius, 
                    startAngle: .degrees(180), 
                    endAngle: .degrees(270), 
                    clockwise: false)
        
        // 2. 画左侧直线到中间弧形的左端点
        let middleLeftPoint = CGPoint(x: rect.midX - middleArcRadius, y: rect.minY)
        path.addLine(to: middleLeftPoint)
        
        // 3. 画中间的内凹弧形 - 用一个大半径的圆弧实现圆润效果
        let middleArcCenter = CGPoint(x: rect.midX, y: rect.minY + middleArcRadius)
        path.addArc(center: middleArcCenter, 
                    radius: middleArcRadius, 
                    startAngle: .degrees(180), 
                    endAngle: .degrees(0), 
                    clockwise: false)
        
        // 4. 画右侧直线到右上角圆角的起始点
        let middleRightPoint = CGPoint(x: rect.midX + middleArcRadius, y: rect.minY)
        path.addLine(to: middleRightPoint)
        
        // 右上角圆角
        path.addArc(center: topRightCornerCenter, 
                    radius: cornerRadius, 
                    startAngle: .degrees(-90), 
                    endAngle: .degrees(0), 
                    clockwise: false)
        
        // 5. 右侧直线到右下角圆角起始点
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - cornerRadius))
        
        // 右下角圆角
        path.addArc(center: bottomRightCornerCenter, 
                    radius: cornerRadius, 
                    startAngle: .degrees(0), 
                    endAngle: .degrees(90), 
                    clockwise: false)
        
        // 6. 底部直线到左下角圆角起始点
        path.addLine(to: CGPoint(x: rect.minX + cornerRadius, y: rect.maxY))
        
        // 左下角圆角
        path.addArc(center: bottomLeftCornerCenter, 
                    radius: cornerRadius, 
                    startAngle: .degrees(90), 
                    endAngle: .degrees(180), 
                    clockwise: false)
        
        path.closeSubpath()
        return path
    }
}

关键调整说明 #

• 中间弧形优化：把原代码中多个小圆弧拼接的逻辑改成单个大半径圆弧，通过将圆心设置在rect.minY + middleArcRadius位置，让弧形自然向下凹陷，解决了原样式尖锐、弯曲度不足的问题
• 参数调整：将middleArcRadius设置为rect.height * 1.5，可根据实际需求缩放这个倍数，灵活控制弧形的弯曲程度
• 路径简化：删除了原代码中冗余的c3、c4圆弧步骤，让路径更简洁，衔接更平滑

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