ios - 如何在 iOS Swift 中剪切 CALayer 的一部分？

Question

这个问题已经有答案了:

How can I 'cut' a transparent hole in a UIImage? (4 个答案)

已关闭 3 年前。

我正在尝试创建一个 QR 阅读器。为此，我展示了一个带有一些 CALayer 的 rectOfInterest 以进行视觉表示。我想显示一个在角落有一些边框和带有一些不透明度的黑色背景的框，因此从 AVCaptureVideoPreviewLayer 隐藏其他 View .到目前为止我所取得的成就如下:

正如你所看到的，CALayer 在那里，但我想剪切图层的盒子部分，这样黑色的东西就不会出现在那里。我用来执行此操作的代码如下所示:

func createTransparentLayer()->CALayer{
        let shape = CALayer()
        shape.frame = self.scanView.layer.bounds
        shape.backgroundColor = UIColor.black.cgColor
        shape.opacity = 0.7
        return shape
    }

我为此研究了其他问题，似乎您对带有剪切部分的图层进行了掩模。因此，我对 CALayer 进行了子类化，并在 drawInContext 中清除了上下文，并设置了 mask super 层的属性为此。之后我什么也得不到。那里的一切都是看不见的。这有什么问题吗？

我尝试过的代码是这样的:

class TransparentLayer: CALayer {
    override func draw(in ctx: CGContext) {
        self.backgroundColor = UIColor.black.cgColor
        self.opacity = 0.7
        self.isOpaque = true
        ctx.clear(CGRect(x: superlayer!.frame.size.width / 2 - 100, y: superlayer!.frame.size.height / 2 - 100, width: 200, height: 200))
    }
}

然后像这样设置 mask 属性:

override func viewDidLayoutSubviews() {
        self.rectOfInterest = CGRect(x: self.scanView.layer.frame.size.width / 2 - 100, y: self.scanView.layer.frame.size.height / 2 - 100, width: 200, height: 200)
        scanView.rectOfInterest = self.rectOfInterest
        let shapeLayer = self.createFrame()
        scanView.doInitialSetup()
        self.scanView.layer.mask = self.createTransparentLayer()
        self.scanView.layer.addSublayer(shapeLayer)
    }

这里是shapeLayer是屏幕截图中的边框角。我怎样才能做到这一点？

Answer 1

我在 View Controller 中添加了垂直和水平居中对齐的 View 。还将高度和宽度固定为 200。然后创建 UIView 的扩展并添加以下代码:

extension UIView {

    func strokeBorder() {

        self.backgroundColor = .clear
        self.clipsToBounds = true

        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = UIBezierPath(rect: self.bounds).cgPath
        self.layer.mask = maskLayer

        let line = NSNumber(value: Float(self.bounds.width / 2))

        let borderLayer = CAShapeLayer()
        borderLayer.path = maskLayer.path
        borderLayer.fillColor = UIColor.clear.cgColor
        borderLayer.strokeColor = UIColor.white.cgColor
        borderLayer.lineDashPattern = [line]
        borderLayer.lineDashPhase = self.bounds.width / 4
        borderLayer.lineWidth = 10
        borderLayer.frame = self.bounds
        self.layer.addSublayer(borderLayer)
    }
}

用途:

通过使用 View 导出和调用方法来根据您的要求设置边框。

self.scanView.strokeBorder()

为了清除与蒙版 View 相关的背景颜色，我添加了以下代码来清除它。

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    self.scanView.strokeBorder()

    self.backgroundView.backgroundColor = UIColor.black.withAlphaComponent(0.5)

    // Draw a graphics with a mostly solid alpha channel
    // and a square of "clear" alpha in there.
    UIGraphicsBeginImageContext(self.backgroundView.bounds.size)
    let cgContext = UIGraphicsGetCurrentContext()
    cgContext?.setFillColor(UIColor.white.cgColor)
    cgContext?.fill(self.backgroundView.bounds)
    cgContext?.clear(CGRect(x:self.scanView.frame.origin.x, y:self.scanView.frame.origin.y, width: self.scanView.frame.width, height: self.scanView.frame.height))
    let maskImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // Set the content of the mask view so that it uses our
    // alpha channel image
    let maskView = UIView(frame: self.backgroundView.bounds)
    maskView.layer.contents = maskImage?.cgImage
    self.backgroundView.mask = maskView
}

输出:

我没有在后台使用相机。