CAShapeLayer在View中无法完美居中的问题求助

核心问题分析 #

你遇到的不居中问题主要来自三个关键点：

• 坐标系混淆：circleView.center是父视图坐标系下的坐标，若将图层添加到父视图，一旦circleView布局发生变化，中心点会偏移；若添加到circleView自身图层，应该使用自身bounds坐标系的中点。
• 布局时机错误：在viewDidLoad中获取circleView的frame/bounds时，AutoLayout尚未完成布局，此时的尺寸和坐标都是临时值，导致圆形位置计算错误。
• 图层添加层级错误：将图层添加到父视图会引入额外的坐标系转换风险，直接添加到circleView的图层能避免这类问题。

修正后的代码示例 #

将绘制逻辑放到viewDidLayoutSubviews中，并将图层添加到circleView自身的图层：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // 移除旧的图层，避免重复添加
    circleView.layer.sublayers?.removeAll(where: { $0 is CAShapeLayer })
    
    let shapeLayer = CAShapeLayer()
    let shapeLayer2 = CAShapeLayer()
    
    // 使用circleView自身bounds的中心点（本地坐标系）
    let center = CGPoint(x: circleView.bounds.midX, y: circleView.bounds.midY)
    // 计算半径：确保描边不会超出circleView范围（lineWidth的一半会延伸到路径外）
    let radius = (min(circleView.bounds.width, circleView.bounds.height) / 2) - (shapeLayer.lineWidth / 2)
    
    // 第一个圆形路径
    let circularPath = UIBezierPath(
        arcCenter: center,
        radius: radius,
        startAngle: -.pi / 2,
        endAngle: 2 * .pi - .pi / 2,
        clockwise: true
    )
    shapeLayer.path = circularPath.cgPath
    shapeLayer.lineWidth = 20
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor(named: "color1")!.cgColor
    shapeLayer.strokeEnd = 1
    
    // 第二个圆形路径
    let circularPath2 = UIBezierPath(
        arcCenter: center,
        radius: radius,
        startAngle: -.pi / 2,
        endAngle: 2 * .pi - .pi / 2,
        clockwise: true
    )
    shapeLayer2.path = circularPath2.cgPath
    shapeLayer2.lineWidth = 20
    shapeLayer2.fillColor = UIColor.clear.cgColor
    shapeLayer2.strokeColor = UIColor(named: "color")!.cgColor
    shapeLayer2.strokeEnd = 0.5
    
    // 将图层添加到circleView的图层，而非父视图
    circleView.layer.addSublayer(shapeLayer)
    circleView.layer.addSublayer(shapeLayer2)
}

关键优化点说明 #

1. 布局时机：viewDidLayoutSubviews是AutoLayout完成后触发的方法，此时circleView的bounds和frame是最终布局结果，计算出的中心点和半径完全准确。
2. 坐标系使用：circleView.bounds.midX/midY是circleView本地坐标系的中点，无论circleView在父视图中的位置如何，这个中心点始终是自身的几何中心。
3. 半径计算：使用min(width, height)确保即使circleView不是正方形，也能绘制正圆形；减去lineWidth/2是因为CAShapeLayer的描边是沿路径两侧延伸的，这样能保证描边刚好贴合circleView的边缘（若不需要贴合，可根据需求调整半径）。
4. 图层清理：每次布局时移除旧的CAShapeLayer，避免重复添加导致的图层叠加问题。

额外检查项 #

• 确认circleView的AutoLayout约束正确，确保其宽高相等（如果需要正圆形的话）。
• 若circleView有圆角，可设置circleView.clipsToBounds = true，避免描边超出圆角范围。

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