【问题标题】:Add a shadow with CAShapeLayer?用 CAShapeLayer 添加阴影?
【发布时间】:2026-01-08 12:40:02
【问题描述】:

我有一个只有底部圆角的CAShapeLayer。我想要的是在底部添加一个阴影,但它不起作用,即使代码看起来显然是正确的。它只在底角旋转,但我没有看到阴影。

let shapeLayer = CAShapeLayer()

    let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath
    shapeLayer.path = path

    shapeLayer.shadowColor = UIColor(r: 233, g: 233, b: 233).cgColor
    shapeLayer.shadowOffset = CGSize(width: 0.0, height: 2.8)
    shapeLayer.shadowOpacity = 1.0
    shapeLayer.shadowRadius = 0.0
    shapeLayer.shouldRasterize = true
    shapeLayer.rasterizationScale = UIScreen.main.scale

    layer.rasterizationScale = UIScreen.main.scale
    layer.mask = shapeLayer

【问题讨论】:

    标签: ios calayer


    【解决方案1】:

    shapeLayer 将您的视图的角变为圆角,因为它被设置为图层的蒙版。您可能希望将其添加为子图层。

    旧:

    layer.mask = shapeLayer
    

    新功能:

    layer.addSublayer(shapeLayer)
    

    如果有帮助,我在这里写了另一个关于向圆角视图添加阴影的答案:https://*.com/a/41475658/6658553

    【讨论】:

    • 谢谢!我从这个问题中得到了一个想法。我所做的只是创建一个带有阴影的虚拟背景视图;并将其插入到具有圆角的视图中(使用insertSubView)。
    • 将子图层添加到我的图层会使视图完全变黑
    【解决方案2】:

    另一种解决方案,

    以下 UIView 扩展将适用于您使用遮罩视图的任何形状

    extension UIView {
    
      func addShadow() {
         self.backgroundColor = UIColor.clear
         let roundedShapeLayer = CAShapeLayer()
         let roundedMaskPath = UIBezierPath(roundedRect: self.bounds,
                                           byRoundingCorners: [.topLeft, .bottomLeft, .bottomRight],
                                           cornerRadii: CGSize(width: 8, height: 8))
    
         roundedShapeLayer.frame = self.bounds
         roundedShapeLayer.fillColor = UIColor.white.cgColor
         roundedShapeLayer.path = roundedMaskPath.cgPath
    
         self.layer.insertSublayer(roundedShapeLayer, at: 0)
    
         self.layer.shadowOpacity = 0.4
         self.layer.shadowOffset = CGSize(width: -0.1, height: 4)
         self.layer.shadowRadius = 3
         self.layer.shadowColor = UIColor.lightGray.cgColor
       }
    }
    

    【讨论】: