UIView层上的阴影

7
我已经创建了一个路径来遮挡我的视线:
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

但这会产生部分遮影,并带有原始视图的颜色..

输入图像描述

使用调试视图层次结构:

输入图像描述

有什么建议吗?

最终结果应类似于此,但阴影应“跟随”路径弧线。

输入图像描述


你期望的结果是什么? - Ashley Mills
嗨,我认为你应该为阴影创建另一条路径,并将shadowOffset设置为零点。 - Luan Tran
@AshleyMills 我更新了问题。 - Luca Davanzo
你能在这里展示你的代码吗 let path = // create magic path (uiview bounds + 2 arcs) - Luan Tran
2个回答

9
当您将遮罩添加到图层时,它会剪辑遮罩外的所有内容,包括阴影。要实现这一点,您需要在带有相同路径的遮罩视图下方添加一个“阴影”视图。

或者将阴影图层添加到带有遮罩视图的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)

enter image description here

如果您将在其他地方使用此代码,可以创建一个包含阴影层和遮罩视图的ShadowMaskedView,可能带有路径属性。

-1

您可以尝试使用这个扩展:

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
    }
}

这在具有遮罩层的视图上无法正常工作,而问题就是关于这个的。 - Ashley Mills

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接