UIView圖層上的陰影

Question

我已經制作了一條路徑來掩蓋我的觀點：

let path = // create magic path (uiview bounds + 2 arcs)
let mask = CAShapeLayer()
mask.path = path.cgPath
view.layer.masksToBounds = false
view.layer.mask = mask

到目前為止一切都好。

現在我想添加一個跟隨路徑的陰影，它可能嗎？

我嘗試了幾種方式，最后一種是：

mask.shadowPath = path.cgPath
mask.shadowColor = UIColor.red.cgColor
mask.shadowOffset = CGSize(width: 10, height: 2.0)       
mask.shadowOpacity = 0.5

但這會產生局部陰影和原始視圖的顏色。

使用調試視圖層次結構

有什么建議？

最終結果應與此類似，但陰影“跟隨”路徑上的弧。

Answer 1

當您向圖層添加蒙版時，它會剪切該蒙版之外的任何內容 - 包括陰影。 要實現此目的，您需要在蒙版視圖下方添加一個“陰影”視圖，該視圖與蒙版具有相同的路徑。

或者將陰影圖層添加到蒙版視圖的超superview 。

let view = UIView(frame: CGRect(x: 50, y: 70, width: 100, height: 60))
view.backgroundColor = .cyan

let mask = CAShapeLayer()
mask.path = UIBezierPath(roundedRect: view.bounds, cornerRadius: 10).cgPath
view.layer.mask = mask

let shadowLayer = CAShapeLayer()
shadowLayer.frame = view.frame
shadowLayer.path = UIBezierPath(roundedRect: view.bounds, cornerRadius: 10).cgPath
shadowLayer.shadowOpacity = 0.5
shadowLayer.shadowRadius = 5
shadowLayer.masksToBounds = false
shadowLayer.shadowOffset = .zero    

let container = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
container.backgroundColor = .white
container.layer.addSublayer(shadowLayer)
container.addSubview(view)

如果你打算在其他地方使用它，你可以創建一個包含陰影層的ShadowMaskedView和蒙版視圖 - 可能帶有路徑屬性。

Answer 2

你可以嘗試這個擴展：

extension UIView {

    func dropShadow() {

        self.layer.masksToBounds = false
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOpacity = 0.5
        self.layer.shadowOffset = CGSize(width: -1, height: 1)
        self.layer.shadowRadius = 1

        self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
        self.layer.shouldRasterize = true
    }
}