重叠多个相同大小的CAShapelayers

Question

在我的应用程序中，有一个场景需要重叠三个圆角矩形，我是通过CAShapelayer和UIBezierPath实现的。

示例代码在这里。

[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
    layer.masksToBounds = true
    layer.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
    view.layer.addSublayer(layer)
}

但是我发现在圆角矩形的圆角处，颜色重叠，出现奇怪的边缘。

我想知道这个问题的原因以及如何解决

Answer 1

CAShapeLayer

的形状默认以抗锯齿方式绘制，并且似乎没有办法将其关闭。抗锯齿边缘是通过制作部分透明像素来完成的，您将看到堆叠不同颜色的透明像素的效果。

根据您将使用的实际颜色，一个修复方法是设置最终图层的描边颜色：

if let shape = view.layer.sublayers?.last as? CAShapeLayer {
    shape.strokeColor = shape.fillColor
}