Swift iOS开发：特定UI元素创建求助（UIBezierPath实现遇阻）

问题分析 #

原代码的路径衔接逻辑有误，导致三角形与圆角矩形过渡不自然，路径走向混乱，最终绘制的形状不符合设计预期。

修正后的代码 #

class CustomBubbleView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    private func commonInit() {
        backgroundColor = .clear
    }
    
    override func draw(_ rect: CGRect) {
        let radius: CGFloat = 10
        let triangleWidth: CGFloat = 20
        let triangleHeight: CGFloat = 15
        // 三角形垂直居中位置
        let triangleMidY = rect.height / 2
        
        let path = UIBezierPath()
        
        // 绘制三角形部分
        path.move(to: CGPoint(x: triangleWidth, y: triangleMidY))
        path.addLine(to: CGPoint(x: 0, y: triangleMidY))
        path.addLine(to: CGPoint(x: triangleWidth, y: triangleMidY + triangleHeight))
        path.addLine(to: CGPoint(x: triangleWidth, y: triangleMidY))
        
        // 绘制圆角矩形右下部分
        path.addArc(withCenter: CGPoint(x: triangleWidth + radius, y: triangleMidY + triangleHeight + radius),
                    radius: radius,
                    startAngle: .pi,
                    endAngle: .pi / 2,
                    clockwise: true)
        path.addLine(to: CGPoint(x: rect.width - radius, y: rect.height - radius))
        
        // 右下角圆角
        path.addArc(withCenter: CGPoint(x: rect.width - radius, y: rect.height - radius),
                    radius: radius,
                    startAngle: .pi / 2,
                    endAngle: 0,
                    clockwise: true)
        path.addLine(to: CGPoint(x: rect.width - radius, y: radius))
        
        // 右上角圆角
        path.addArc(withCenter: CGPoint(x: rect.width - radius, y: radius),
                    radius: radius,
                    startAngle: 0,
                    endAngle: -.pi / 2,
                    clockwise: true)
        path.addLine(to: CGPoint(x: triangleWidth + radius, y: radius))
        
        // 左上角圆角
        path.addArc(withCenter: CGPoint(x: triangleWidth + radius, y: radius),
                    radius: radius,
                    startAngle: -.pi / 2,
                    endAngle: .pi,
                    clockwise: true)
        path.addLine(to: CGPoint(x: triangleWidth, y: triangleMidY))
        
        // 设置样式并绘制
        UIColor.gray.setStroke()
        UIColor.white.setFill()
        path.lineWidth = 1
        path.fill()
        path.stroke()
    }
}

关键修正点 #

• 三角形路径重构：重新规划三个顶点位置，保证和圆角矩形的衔接更贴合设计图形态
• 圆角方向调整：将原代码的clockwise: false改为true，确保圆角弧度方向正确
• 路径顺序优化：按顺时针方向连贯绘制所有部分，避免路径断点或交叉
• 尺寸适配：微调三角形高度，让整体比例更接近设计效果

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