重叠多个相同大小的 CAShapelayer

Overlapping multiple CAShapelayers of the same size

提问人:Yasic 提问时间:9/13/2023 更新时间:9/13/2023 访问量:28

问:

在我的应用程序中,有一个场景需要重叠三个圆角矩形,这是我通过 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)
}

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

enter image description here

我想知道造成这种情况的原因以及如何解决它

iOS UIKiter Core-图形 卡莱尔

评论

0赞 HangarRash 9/13/2023
可能是因为某些像素在角落部分透明,以使它们看起来更平滑。重叠的部分透明像素会带来有趣的新颜色。

答:

1赞 jrturton 9/13/2023 #1

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

根据您将使用的实际颜色,一种解决方法是设置最终图层的描边颜色:

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