代码之家 › 专栏 › 技术社区 › Zack Shapiro

UIView中的CAShapeLayer剪切

cashapelayer calayer swift ios

Zack Shapiro · 技术社区 · 6 年前

我的目标是创建一个非常不透明的背景和一个清晰的圆形矩形插入

    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 ,观点是完全清楚的。当我把它注释掉时,我看到的是半透明的背景色,但没有遮罩裁剪

知道我做错了什么吗?谢谢

2 回复 | 直到 6 年前

MP Droid 6 年前

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