如何让气泡的箭头圆角延伸至包围矩形的左边缘

核心思路：计算圆角截断的水平偏移量 #

要让指针的圆角贴合包围盒左边缘，需先算出圆角截断指针尖端的水平距离，再将整个气泡形状向左偏移该距离。关键推导步骤如下：

1. 计算指针斜边的倾斜角度θ
   指针斜边连接矩形左边缘点 (triangleWidth, centerY ± triangleHeight/2) 和原尖端点 (0, centerY)，斜边与水平方向的夹角θ可通过atan2直接计算：

let θ = atan2(triangleHeight / 2, triangleWidth)

2. 计算水平偏移量offsetX
   圆角半径为triangleRadius，截断后尖端到圆角最左点的水平偏移量为：

let offsetX = CGFloat(triangleRadius) * (1 - cos(θ))

修改后的路径代码 #

将所有路径中的x坐标减去offsetX，让圆角最左点对齐包围盒左边缘：

var path: CGPath {
    let cgPath = CGMutablePath()
    let centerY = shapeLayer.bounds.height / 2
    let θ = atan2(triangleHeight / 2, triangleWidth)
    let offsetX = CGFloat(triangleRadius) * (1 - cos(θ))
    
    // 修正后的起始点（左移offsetX）
    let startPoint = CGPoint(x: triangleWidth - offsetX, y: centerY + triangleHeight/2)
    cgPath.move(to: startPoint)
    
    // 矩形右下角圆角（左移offsetX）
    cgPath.addArc(center: CGPoint(x: triangleWidth - offsetX + radius, y: shapeLayer.bounds.height - radius),
                  radius: radius,
                  startAngle: CGFloat.pi,
                  endAngle: CGFloat.pi / 2,
                  clockwise: true)
    
    // 矩形右下角到右上角圆角
    cgPath.addArc(center: CGPoint(x: shapeLayer.bounds.width - radius, y: shapeLayer.bounds.height - radius),
                  radius: radius,
                  startAngle: CGFloat.pi / 2,
                  endAngle: 0,
                  clockwise: true)
    
    // 矩形右上角到左上角圆角
    cgPath.addArc(center: CGPoint(x: shapeLayer.bounds.width - radius, y: radius),
                  radius: radius,
                  startAngle: 0,
                  endAngle: 3 * CGFloat.pi / 2,
                  clockwise: true)
    
    // 矩形左上角圆角（左移offsetX）
    cgPath.addArc(center: CGPoint(x: triangleWidth - offsetX + radius, y: radius),
                  radius: radius,
                  startAngle: 3 * CGFloat.pi / 2,
                  endAngle: CGFloat.pi,
                  clockwise: true)
    
    // 连接到指针左下角（左移offsetX）
    cgPath.addLine(to: CGPoint(x: triangleWidth - offsetX, y: centerY - triangleHeight/2))
    
    // 绘制指针圆角：修正tangent2End的x坐标（左移offsetX）
    cgPath.addArc(tangent1End: CGPoint(x: 0, y: centerY), 
                  tangent2End: CGPoint(x: triangleWidth - offsetX, y: centerY + triangleHeight/2), 
                  radius: CGFloat(triangleRadius))
    
    // 闭合路径
    cgPath.addLine(to: startPoint)

    return cgPath
}

说明 #

• 该方法适用于任意triangleWidth、triangleHeight和triangleRadius的组合，只需保证triangleRadius不超过指针斜边长度（避免圆角超出指针范围）。
• 偏移后，气泡包围盒左边缘将与指针圆角的最左侧点完全对齐，解决原代码中圆角未贴合边缘的问题。

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