iPhone 7与iPhone 8 Plus中CAShapeLayer绘制圆形的显示差异问题

嘿，我之前也踩过这个坑！用CAShapeLayer画圆形在不同尺寸设备（比如iPhone 8 Plus和iPhone 7）上显示异常，大多是因为布局时机、尺寸适配或者图层设置没做好，给你几个实用的排查和解决方向：

1. 别用固定数值，改用相对尺寸创建路径 #

iPhone 7是@2x分辨率（375pt × 667pt），iPhone 8 Plus是@3x（414pt × 736pt），如果直接写死宽高（比如CGRect(x:50, y:50, width:100, height:100)），不仅位置会偏移，还可能因为宽高和父视图比例不一致导致圆形变椭圆。

正确做法：基于父视图的bounds计算相对尺寸，保证宽高严格相等：

// 以父视图中心为圆心，半径占父视图宽度的1/4为例
let radius = parentView.bounds.width * 0.25
let circleRect = CGRect(
    x: parentView.bounds.midX - radius,
    y: parentView.bounds.midY - radius,
    width: radius * 2,
    height: radius * 2
)
let path = UIBezierPath(ovalIn: circleRect)

2. 避免线条被裁切，处理lineWidth的影响 #

如果你的圆形是描边样式（stroke），lineWidth的粗细会影响显示：线条是居中在路径上的，如果路径刚好贴合图层边界，一半线条会被裁切，在不同分辨率下模糊程度不一样。

解决办法：创建路径时给bounds内缩lineWidth/2的距离，同时确保图层的frame和视图一致：

// 假设shapeLayer的lineWidth是4.0
let inset = shapeLayer.lineWidth / 2
let circleRect = bounds.insetBy(dx: inset, dy: inset)
shapeLayer.path = UIBezierPath(ovalIn: circleRect).cgPath
shapeLayer.frame = bounds

3. 在正确的时机更新路径 #

如果在viewDidLoad里创建路径，此时视图的bounds还没经过自动布局计算，拿到的是初始默认值（比如(0,0,100,100)），后续布局完成后路径不会自动更新，导致显示错位。

正确时机：重写layoutSubviews（自定义View）或者在viewDidLayoutSubviews（ViewController）里更新路径：

override func layoutSubviews() {
    super.layoutSubviews()
    // 在这里重新计算并设置shapeLayer的path
    updateCirclePath()
}

4. 检查图层基础设置 #

还有几个细节容易忽略：

• 确保shapeLayer.fillColor和strokeColor设置正确，不要出现透明或者颜色值错误的情况
• 如果用了masksToBounds = true，要确认图层的范围足够容纳线条，避免裁切
• 不要手动设置shapeLayer.transform，除非你确定不会影响圆形的比例

完整示例代码 #

给你一个可复用的自定义圆形View，能适配所有设备：

class CircleView: UIView {
    private let shapeLayer = CAShapeLayer()
    
    // 可以通过这个属性动态调整描边宽度
    var lineWidth: CGFloat = 4.0 {
        didSet {
            shapeLayer.lineWidth = lineWidth
            updateCirclePath()
        }
    }
    
    var strokeColor: UIColor = .red {
        didSet {
            shapeLayer.strokeColor = strokeColor.cgColor
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayer()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayer()
    }
    
    private func setupLayer() {
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineWidth = lineWidth
        shapeLayer.lineCap = .round // 让描边端点更圆润
        layer.addSublayer(shapeLayer)
    }
    
    private func updateCirclePath() {
        let inset = shapeLayer.lineWidth / 2
        let circleRect = bounds.insetBy(dx: inset, dy: inset)
        shapeLayer.path = UIBezierPath(ovalIn: circleRect).cgPath
        shapeLayer.frame = bounds
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        updateCirclePath()
    }
}

按照上面的方法调整后，iPhone 7和8 Plus上的圆形应该就能显示一致啦！

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