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时，视图完全清晰。当我把它注释掉时，我看到了半透明的背景颜色，但没有遮罩镂空

知道我在这里做错了吗？谢谢！

Answer 1

这是一个我认为可以实现预期效果的游乐场（减去.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

Answer 2

你的面具层没有大小。添加此行maskLayer.frame = shape

，您不需要background.layer.addSublayer(maskLayer)

UIView中的CAShapeLayer剪裁

2 个答案: