【问题标题】:Shadow on UIView layerUIView 层上的阴影
【发布时间】:2017-07-31 22:07:00
【问题描述】:

我已经开辟了一条路径来掩盖我的观点:

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

但这会产生部分阴影和原始视图的颜色..

带有调试视图层次结构:

有什么建议吗?

最终结果应该与此类似,但阴影会“跟随”路径上的弧线。

【问题讨论】:

  • 您要寻找的结果是什么?
  • 嗨,我认为您应该为阴影创建另一条路径并将shadowOffset 设置为零点
  • @AshleyMills 我更新了问题..
  • 你能在let path = // create magic path (uiview bounds + 2 arcs)这里展示你的代码吗?

标签: ios swift cocoa-touch uiview uibezierpath


【解决方案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
    }
}

【讨论】:

  • 在带有蒙版图层的视图上工作,这就是问题所在
【解决方案2】:

当您向图层添加蒙版时,它会剪掉该蒙版之外的任何内容 - 包括阴影。为此,您需要在蒙版视图下方添加一个“阴影”视图,该视图与蒙版具有相同的路径。

或者给蒙版视图的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 - 可能带有路径属性。

【讨论】:

    猜你喜欢
    • 2011-05-24
    • 1970-01-01
    • 1970-01-01
    • 2018-05-19
    • 2017-10-17
    • 2016-04-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多