如何使用 Swift 使 CAShapeLayer 之外的所有内容变黑且不透明度为 50%？

Question

我有以下绘制形状的代码：

let screenSize: CGRect = UIScreen.main.bounds
let cardLayer = CAShapeLayer()
let cardWidth = 350.0
let cardHeight = 225.0
let cardXlocation = (Double(screenSize.width) - cardWidth) / 2
let cardYlocation = (Double(screenSize.height) / 2) - (cardHeight / 2) - (Double(screenSize.height) * 0.05)
cardLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: cardWidth, height: 225.0), cornerRadius: 10.0).cgPath
cardLayer.position = CGPoint(x: cardXlocation, y: cardYlocation)
cardLayer.strokeColor = UIColor.white.cgColor
cardLayer.fillColor = UIColor.clear.cgColor
cardLayer.lineWidth = 4.0        
self.previewLayer.insertSublayer(cardLayer, above: self.previewLayer)

我希望形状之外的所有内容都是黑色的，不透明度为 50%。这样你可以看到相机视图仍在它后面，但它变暗了，除了形状所在的地方。

我尝试向 previewLayer.mask 添加遮罩，但这并没有给我想要的效果。

Answer 1

形状图层只能影响它覆盖的内容，而不影响它没有覆盖的space。制作一条覆盖整个视频的路径，并在卡片应放置的位置打一个洞。

let areaToDarken = previewLayer.bounds // assumes origin at 0, 0
let areaToLeaveClear = areaToDarken.insetBy(dx: 50, dy: 200)
let shapeLayer = CAShapeLayer()
let path = CGPathCreateMutable()
path.addRect(areaToDarken, ...)
path.addRoundedRect(areaToLeaveClear, ...)
cardLayer.frame = previewLayer.bounds // use frame if shapeLayer is sibling
cardLayer.path = path
cardLayer.fillRule = .evenOdd // allow holes
cardLayer.fillColor = black, 50% opacity

Answer 2

你想戴口罩的冲动是对的，但我们想一想需要戴口罩的是什么。您正在做三件事：

调暗整个东西。我们称之为调光层。它需要一个深色半透明背景。
绘制白色圆角矩形。那就是形状层。
在整个事情上打个洞。那就是面具。

现在，前两层可以是同一层了。那只剩下面具了。这不是微不足道的构造：遮罩完全在其透明度方面影响其所有者，因此我们需要一个不透明的遮罩，除了形状类似于形状层形状的区域，该区域需要清晰。为此，我们从形状开始，然后在填充遮罩时剪辑到该形状——或者我们可以在擦除时剪辑到该形状面具，这是我更喜欢的方法。

此外，您的代码有一些重大缺陷，其中最重要的是您的形状图层没有大小。没有尺码，就没有什么可以掩饰的。

这里是您的代码，经过更正和补充；为了测试目的，我把它作为一个视图控制器的整体，我所涵盖的是整个视图控制器的视图，而不是特定的子视图或子层：

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = .red
}
private var didInitialLayout = false
override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    if didInitialLayout {
        return
    }
    didInitialLayout = true
    let screenSize = UIScreen.main.bounds
    let cardLayer = CAShapeLayer()
    cardLayer.frame = self.view.bounds
    self.view.layer.addSublayer(cardLayer)

    let cardWidth = 350.0 as CGFloat
    let cardHeight = 225.0 as CGFloat
    let cardXlocation = (screenSize.width - cardWidth) / 2
    let cardYlocation = (screenSize.height / 2) - (cardHeight / 2) - (screenSize.height * 0.05)
    let path = UIBezierPath(roundedRect: CGRect(
            x: cardXlocation, y: cardYlocation, width: cardWidth, height: cardHeight),
            cornerRadius: 10.0)
    cardLayer.path = path.cgPath
    cardLayer.strokeColor = UIColor.white.cgColor
    cardLayer.lineWidth = 8.0
    cardLayer.backgroundColor = UIColor.black.withAlphaComponent(0.5).cgColor

    let mask = CALayer()
    mask.frame = cardLayer.bounds
    cardLayer.mask = mask

    let r = UIGraphicsImageRenderer(size: mask.bounds.size)
    let im = r.image { ctx in
        UIColor.black.setFill()
        ctx.fill(mask.bounds)
        path.addClip()
        ctx.cgContext.clear(mask.bounds)
    }
    mask.contents = im.cgImage
}

这就是我们得到的。我没有预览图层，但是背景是红色的，正如你所看到的，红色从白色形状中透出来，这正是你想要的效果。

如何使用 Swift 使 CAShapeLayer 之外的所有内容变黑且不透明度为 50%？

How do I make everything outside of a CAShapeLayer black with an opacity of 50% with Swift?

core-graphics

cashapelayer

ios

swift