ios - UIView 中的 CAShapeLayer 抠图

Question

我的目标是创建一个非常不透明的背景，带有清晰的圆形矩形插图

    let shape = CGRect(x: 0, y: 0, width: 200, height: 200)

    let maskLayer = CAShapeLayer()
    maskLayer.path = UIBezierPath(roundedRect: shape, cornerRadius: 16).cgPath
    maskLayer.fillColor = UIColor.clear.cgColor
    maskLayer.fillRule = kCAFillRuleEvenOdd

    let background = UIView()
    background.backgroundColor = UIColor.black.withAlphaComponent(0.8)
    view.addSubview(background)
    constrain(background) {
        $0.edges == $0.superview!.edges
    }

    background.layer.addSublayer(maskLayer)
//        background.layer.mask = maskLayer

当我取消注释 background.layer.mask = maskLayer 时， View 完全清晰。当我将其注释掉时，我看到了半透明的背景颜色，但没有 mask 切口

知道我在这里做错了什么吗？谢谢!

Answer 1

这是一个我认为可以实现您预期效果的 Playground (减去 .edges 和 constrain - 这似乎是您自己的扩展)。

a) 使用红色背景而不是带 alpha 的黑色(只是为了使效果突出)

b) 设置 maskLayer.backgroundColor 而不是 maskLayer.fillColor

将 maskLayer 作为另一层添加到 uiview 是多余的(如 @Ken 所指出的)，但似乎没有害处。

    import UIKit
    import PlaygroundSupport


    let bounds = CGRect(x: 0, y: 0, width: 400, height: 200)

    let uiview = UIView(frame: bounds)
    uiview.backgroundColor = UIColor.red.withAlphaComponent(0.8)

    PlaygroundPage.current.liveView = uiview

    let shape = CGRect(x: 100, y: 50, width: 200, height: 100)


    let maskLayer = CAShapeLayer()
    maskLayer.path = UIBezierPath(roundedRect: shape, cornerRadius: 16).cgPath
    maskLayer.backgroundColor = UIColor.clear.cgColor
    maskLayer.fillRule = kCAFillRuleEvenOdd
    uiview.layer.mask = maskLayer

image of clear inset

另一方面，如果您想要像下面这样的相框/带透明窗口的彩色信封效果，请参阅 gist

image of picture frame