如何在iOS Swift中削减CALayer的一部分? [英] How to cut portion of CALayer in iOS Swift?

问题描述

我正在尝试创建QR阅读器.为此，我正在显示带有某些CALayer的rectOfInterest以便进行视觉表示.我想显示一个在角落处带有一些边框的框，以及一些不透明的黑色背景，因此从 AVCaptureVideoPreviewLayer 隐藏其他视图.到目前为止，我所取得的成就是这样的:

I am trying to create a QR Reader. For that I am showing a rectOfInterest with some CALayer for visual representation. I want to show a box with some border at the corners and black background with some opacity so hide the other view from the AVCaptureVideoPreviewLayer. What I have achieved till now looks like this:

如您所见，CALayer在那儿，但我想切割该图层的盒子部分，以使黑色的东西不会出现在那儿.我用于执行此操作的代码如下:

As you can see the CALayer is there but I want to cut the box portion of the layer so that that blackish thing does not come there. The code I am using to do this is like below:

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

为此，我调查了其他问题，好像您拥有带有剪切部分的 mask 图层.因此，我将CALayer子类化，并在 drawInContext 中清除了上下文，并将超级层的 mask 属性设置为此.之后，我一无所获.那里一切都看不见.怎么了?

I looked into other questions for this, seems like you have the mask the layer with the cut portion. So I subclassed the CALayer and cleared the context in drawInContext and set the mask property of the super layer to this. After that I get nothing. Everything is invisible there. What is wrong in this?

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

The code I tried is this:

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属性:

then set the mask property like this:

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 是屏幕截图中的带边框的角.我该如何实现?

here the shapeLayer is the bordered corner in the screenshot. How can I achieve this?

推荐答案

我在视图控制器中添加了垂直和水平居中对齐的视图.还将高度和宽度固定为200.然后创建 UIView 的扩展名并添加以下代码:

I have added view in my view controller which is centre align vertically and horizontally. Also fixed height and width to 200. Then created extension of UIView and added following code:

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)
    }
}

使用:

使用视图的出口和调用方法来根据需要设置边框.

By using outlet of view and call method to set border as you have request.

self.scanView.strokeBorder()

要清除与蒙版视图相对应的backgroundColor，我添加了以下代码以清除它.

To clear the backgroundColor respective to mask view, I have added following code to clear it.

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
}

输出:

我不在后台使用相机.

这篇关于如何在iOS Swift中削减CALayer的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！