重叠同尺寸CAShapeLayer时圆角出现异常边缘的原因及解决方法

1. 抗锯齿像素叠加：CAShapeLayer绘制圆角路径时，会自动生成半透明的抗锯齿过渡像素来平滑边缘。当多个图层完全重叠时，这些半透明像素互相叠加，导致颜色混合，出现模糊、发灰的异常边缘。
2. 冗余的masksToBounds设置：CAShapeLayer通过path已经定义了显示区域，设置masksToBounds = true属于冗余操作，反而可能触发额外的图层裁剪逻辑，加重渲染异常。

方案一：合并路径到单个图层绘制（推荐） #

将所有圆角矩形的路径合并，使用单个图层或自定义View绘制，从根源避免多个图层的抗锯齿像素叠加。如果需要不同颜色，可在draw(_:)方法中分别填充每个路径：

// 自定义View实现多圆角矩形绘制
class OverlayRoundRectView: UIView {
    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }
        let colors: [UIColor] = [.green, .blue, .yellow]
        
        // 示例：三个矩形依次偏移，可根据需求调整位置
        for (index, color) in colors.enumerated() {
            let rect = CGRect(x: 100 + index*10, y: 100 + index*10, width: 100, height: 100)
            let roundPath = UIBezierPath(roundedRect: rect, cornerRadius: 25)
            
            color.setFill()
            roundPath.fill()
        }
    }
}

// 添加到父视图
let customView = OverlayRoundRectView(frame: view.bounds)
view.addSubview(customView)

方案二：启用光栅化优化 #

如果必须使用多个图层，开启图层光栅化让系统提前渲染图层内容，避免实时叠加的抗锯齿异常：

[UIColor.green, UIColor.blue, UIColor.yellow].forEach { color in
    let roundPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 100), cornerRadius: 25)
    let layer = CAShapeLayer()
    layer.path = roundPath.cgPath
    layer.fillColor = color.cgColor
    // 移除冗余的masksToBounds设置
    layer.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
    // 启用光栅化并匹配屏幕缩放比例
    layer.shouldRasterize = true
    layer.rasterizationScale = UIScreen.main.scale
    view.layer.addSublayer(layer)
}

方案三：调整图层位置避免边缘叠加 #

如果需求是偏移显示三个矩形，确保上层矩形的圆角区域完全覆盖下层的抗锯齿边缘（偏移量大于1像素），避免半透明像素混合。

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