CAShapeLayer cutout in UIView

百般思念 提交于 2021-01-28 09:51:59

问题


My goal is to create a pretty opaque background with a clear rounded rect inset

    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

When I uncomment background.layer.mask = maskLayer, the view is totally clear. When I have it commented out, I see the semi-opaque background color but no mask cutout

Any idea what I'm doing wrong here? Thanks!


回答1:


Here is a playground that I think implements your intended effect (minus .edges and constrain - that appear to be your own extensions).

a) used a red background instead of black with alpha (just to make the effect stand out)

b) set maskLayer.backgroundColor instead of maskLayer.fillColor

Adding the maskLayer as another layer to uiview is superfluous (as indicated by @Ken) but seems to do no harm.

    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

On the other hand, if you intended a picture frame / colored-envelope-with-transparent-window effect like below, then see gist

image of picture frame




回答2:


Your mask Layer has no size. Add this line maskLayer.frame = shape

and you don't need background.layer.addSublayer(maskLayer)



来源:https://stackoverflow.com/questions/47722301/cashapelayer-cutout-in-uiview

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!