CAShapeLayer Ausschnitt in UIView

Question

Mein Ziel ist es, einen ziemlich undurchsichtigen Hintergrund mit einem klaren abgerundeten rect Einsatz

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 

Wenn ich background.layer.mask = maskLayer Kommentar- zu schaffen, der Blick völlig klar ist. Wenn ich es auskommentiert habe, sehe ich die halbdeckende Hintergrundfarbe, aber keinen Maskenausschnitt

Irgendeine Idee, was ich hier falsch mache? Vielen Dank!

Answer 1

hier ein Spielplatz, die ich denke, Ihre beabsichtigte Wirkung implementiert (minus .edges und constrain - die eigenen Erweiterungen zu sein scheint).

a) verwendet, um einen roten Hintergrund statt schwarz mit alpha (nur die Wirkung abheben)

b) maskLayer.backgroundColor Set statt maskLayer.fillColor

die Maskenebene als eine weitere Schicht auf uiview Hinzufügen überflüssig (wie von @Ken angegeben) scheint aber keinen Schaden anzurichten.

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

Auf der anderen Seite, wenn Sie einen Bilderrahmen/farbig-Umschlag-mit-transparent-Fenster sollten Wirkung wie unten, dann sehen gist

image of picture frame

Answer 2

Ihre Maskenebene hat keine Größe. diese Zeilen hinzufügen maskLayer.frame = shape

und Sie brauchen nicht background.layer.addSublayer(maskLayer)