SwiftUI Path气泡尾巴绘制问题：线段与弧线无法平滑衔接

问题根源 #

你当前的弧线衔接生硬，核心原因是弧线的起点/终点没有与前后线段保持切线连续——圆心位置和角度设置未匹配线段的方向，导致弧线和线段衔接处出现明显折角。

修正后的代码 #

struct SpeechBubbleTail: Shape {
    private let radius: CGFloat
    init(radius: CGFloat = 10) {
        self.radius = radius
    }

    func path(in rect: CGRect) -> Path {
        Path { path in
            // 定义路径关键控制点
            let topRight = CGPoint(x: rect.maxX, y: rect.minY)
            let bottomMid = CGPoint(x: rect.minX + radius, y: rect.maxY - radius)
            let topLeft = CGPoint(x: rect.minX + radius * 0.5, y: rect.minY)
            
            // 计算两条线段的方向向量并归一化
            func normalize(_ vec: CGVector) -> CGVector {
                let length = sqrt(vec.dx*vec.dx + vec.dy*vec.dy)
                return CGVector(dx: vec.dx/length, dy: vec.dy/length)
            }
            
            let line1Vec = CGVector(dx: bottomMid.x - topRight.x, dy: bottomMid.y - topRight.y)
            let normLine1 = normalize(line1Vec)
            
            let line2Vec = CGVector(dx: topLeft.x - bottomMid.x, dy: topLeft.y - bottomMid.y)
            let normLine2 = normalize(line2Vec)
            
            // 计算指向角内侧的切线垂直向量
            let perp1 = CGVector(dx: -normLine1.dy, dy: normLine1.dx)
            let perp2 = CGVector(dx: normLine2.dy, dy: -normLine2.dx)
            
            // 推导角平分线方向并归一化
            let bisector = CGVector(dx: perp1.dx + perp2.dx, dy: perp1.dy + perp2.dy)
            let normBisector = normalize(bisector)
            
            // 确定弧线圆心：从拐点向角平分线方向移动radius距离
            let center = CGPoint(
                x: bottomMid.x + normBisector.dx * radius,
                y: bottomMid.y + normBisector.dy * radius
            )
            
            // 精确计算弧线的起始/结束弧度
            let startAngle = atan2(normLine1.dy, normLine1.dx) + .pi/2
            let endAngle = atan2(normLine2.dy, normLine2.dx) - .pi/2
            
            // 绘制完整路径
            path.move(to: topRight)
            path.addLine(to: bottomMid)
            path.addArc(
                center: center,
                radius: radius,
                startAngle: Angle(radians: startAngle),
                endAngle: Angle(radians: endAngle),
                clockwise: true
            )
            path.addLine(to: topLeft)
        }
    }
}

关键调整说明 #

1. 切线连续性保证：圆心位于两条线段的角平分线上，且到两条线段的距离等于弧线半径，确保弧线与线段完美相切，衔接无折角。
2. 角度精确计算：用弧度替代度数计算起始/结束角度，避免转换误差，确保弧线的起点和终点完全贴合线段的切线方向。
3. 动态适配：所有位置计算基于radius动态生成，调整radius时尾巴形状会按比例缩放，保持形态一致性。

简化替代方案（固定形态场景） #

如果气泡尾巴形态固定，也可以用贝塞尔曲线快速实现平滑衔接：

struct SpeechBubbleTail: Shape {
    private let radius: CGFloat
    init(radius: CGFloat = 10) {
        self.radius = radius
    }

    func path(in rect: CGRect) -> Path {
        Path { path in
            let topRight = CGPoint(x: rect.maxX, y: rect.minY)
            let bottomMid = CGPoint(x: rect.minX + radius, y: rect.maxY - radius)
            let topLeft = CGPoint(x: rect.minX + radius * 0.5, y: rect.minY)
            
            // 贝塞尔曲线控制点，手动调整至角内侧合适位置
            let controlPoint = CGPoint(
                x: bottomMid.x - radius * 0.7,
                y: bottomMid.y - radius * 0.7
            )
            
            path.move(to: topRight)
            path.addLine(to: bottomMid)
            path.addQuadCurve(to: topLeft, control: controlPoint)
        }
    }
}

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