Swift 4绘制描边圆形时如何消除圆心到圆周的多余线条？

嘿，我太懂你遇到的这个问题了！之前用CAShapeLayer和UIBezierPath画圆弧/圆形的时候，也踩过一模一样的坑——那条莫名出现的“从圆心到圆弧起点”的线条，其实根本不是指向圆心，而是从路径的默认起点（(0,0)）连到了圆弧的起始点。

问题根源 #

当你创建一个空的UIBezierPath时，它的当前点默认是(0,0)。调用addArc(withCenter:...)方法时，系统会自动从当前点画一条直线到圆弧的起始坐标，然后才开始绘制圆弧——这就是那条多余线条的由来。

解决方案 #

有两种简单的方法可以解决这个问题，选你顺手的来：

方法1：先把路径起点移到圆弧起始点

在调用addArc之前，先用move(to:)方法把路径的当前点直接设置到圆弧的起始坐标，跳过自动生成的连线：

func drawingNow(){
    let layer = CAShapeLayer()
    let center = CGPoint(x: 100, y: 100) // 你的圆心坐标
    let radius: CGFloat = 50 // 半径
    let startAngle: CGFloat = 0 // 圆弧起始角度
    let endAngle: CGFloat = 2 * .pi // 圆弧结束角度（完整圆）
    
    // 计算圆弧起始点的坐标
    let startPoint = CGPoint(
        x: center.x + radius * cos(startAngle),
        y: center.y + radius * sin(startAngle)
    )
    
    let path = UIBezierPath()
    // 关键：先移动路径起点到圆弧起始点
    path.move(to: startPoint)
    // 再绘制圆弧
    path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
    
    // 配置Layer属性
    layer.path = path.cgPath
    layer.strokeColor = UIColor.red.cgColor
    layer.fillColor = UIColor.clear.cgColor
    layer.lineWidth = 2
    
    line.append(layer)
    // 假设添加到视图的layer上
    self.view.layer.addSublayer(layer)
}

方法2：直接用椭圆路径创建完整圆形

如果你要画的是完整的圆形，可以直接用UIBezierPath(ovalIn:)创建路径，这种方式生成的路径本身就是闭合的圆形，不会有多余线条：

func drawingNow(){
    let layer = CAShapeLayer()
    let center = CGPoint(x: 100, y: 100)
    let radius: CGFloat = 50
    
    // 创建包含圆形的矩形（圆心为矩形中心）
    let circleRect = CGRect(
        x: center.x - radius,
        y: center.y - radius,
        width: radius * 2,
        height: radius * 2
    )
    // 直接生成圆形路径
    let path = UIBezierPath(ovalIn: circleRect)
    
    // 配置Layer属性
    layer.path = path.cgPath
    layer.strokeColor = UIColor.red.cgColor
    layer.fillColor = UIColor.clear.cgColor
    layer.lineWidth = 2
    
    line.append(layer)
    self.view.layer.addSublayer(layer)
}

两种方法都能完美移除那条多余的线条，你可以根据自己的场景选择——如果是画部分圆弧，优先用方法1；如果是完整圆形，方法2更简洁。

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