如何在Swift 4中使用CAShapeLayer和BezierPath绘制曲线？

嘿，我来帮你搞定这个需求！从你提到的效果来看，我们可以用二次贝塞尔曲线来实现这种平滑的弧线，核心是算出合适的控制点，让曲线呈现出你想要的弯曲形态。下面是完整的实现方案：

完整实现代码 #

import UIKit

func drawCurvedLine(start: CGPoint, end: CGPoint) {
    // 1. 创建贝塞尔路径对象
    let path = UIBezierPath()
    
    // 2. 移动路径到起始点
    path.move(to: start)
    
    // 3. 计算二次贝塞尔曲线的控制点
    // 核心逻辑：让曲线在两点连线的中垂线上凸起，你可以调整偏移量改变弯曲程度
    let midPoint = CGPoint(x: (start.x + end.x)/2, y: (start.y + end.y)/2)
    let deltaX = end.x - start.x
    let deltaY = end.y - start.y
    
    // 避免水平/垂直连线时的计算异常
    let offsetDistance: CGFloat = 100 // 控制弯曲幅度，数值越大曲线越拱
    var controlPoint: CGPoint
    
    if deltaX == 0 {
        // 两点垂直对齐，控制点水平偏移
        controlPoint = CGPoint(x: midPoint.x + offsetDistance, y: midPoint.y)
    } else if deltaY == 0 {
        // 两点水平对齐，控制点垂直偏移（向上凸）
        controlPoint = CGPoint(x: midPoint.x, y: midPoint.y - offsetDistance)
    } else {
        // 计算中垂线方向的偏移坐标，保证曲线向上凸起
        let perpendicularSlope = -deltaX / deltaY
        let angle = atan(perpendicularSlope)
        let offsetX = offsetDistance * cos(angle)
        let offsetY = offsetDistance * sin(angle)
        controlPoint = CGPoint(x: midPoint.x + offsetX, y: midPoint.y - offsetY)
    }
    
    // 4. 向路径添加二次贝塞尔曲线
    path.addQuadCurve(to: end, controlPoint: controlPoint)
    
    // 5. 配置CAShapeLayer的样式
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.blue.cgColor // 自定义线条颜色
    shapeLayer.fillColor = UIColor.clear.cgColor // 填充色设为透明
    shapeLayer.lineWidth = 2.0 // 自定义线条粗细
    shapeLayer.lineCap = .round // 线条端点设为圆角，让效果更顺滑
    
    // 6. 将图层添加到目标视图（这里示例添加到根视图，实际可替换为你的目标视图）
    if let targetView = UIApplication.shared.keyWindow?.rootViewController?.view {
        targetView.layer.addSublayer(shapeLayer)
    }
}

关键细节调整说明 #

• 弯曲幅度控制：修改offsetDistance的值就能改变曲线的凸起程度，数值越大，曲线越“夸张”；如果想要曲线向下凸，只需要把控制点的midPoint.y - offsetY改成midPoint.y + offsetY即可。
• 样式自定义：你可以根据UI需求修改strokeColor（线条颜色）、lineWidth（线条粗细）、lineCap（端点样式）这些属性，适配不同的设计风格。
• 灵活添加图层：如果想指定曲线绘制到某个特定视图，建议给函数增加一个UIView参数，比如：

  func drawCurvedLine(start: CGPoint, end: CGPoint, in targetView: UIView) {
      // ... 前面代码不变
      targetView.layer.addSublayer(shapeLayer)
  }
  

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