如何在 UIView 中制作透明孔

Question

在 UIView 的边缘周围创建圆形圆圈的最佳方法是什么，而且圆圈必须是透明的，我用草图创建这个

Answer 1

我已经通过使用 UIBezierPath 和 CAShapeLayer 实现了这个功能

我正在从情节提要中获取观点。

@IBOutlet weak var myView: UIView!

创建 UIBezierPath() 的对象

var path = UIBezierPath()

创建一个以圆的中心点为参数的方法，我们创建另一个 UIBezierPath() 作为 circlePath 即圆，我们将圆附加到之前的 UIBezierPath() path.
知道拿一个 CAShapeLayer 并切割 circlePath

func overLay(points: CGPoint) {
    let sizes = CGSize(width: 30, height: 30)
    let circlePath = UIBezierPath(ovalIn: CGRect(origin: points, size: sizes))
    path.append(circlePath)

    let maskLayer = CAShapeLayer() //create the mask layer
    maskLayer.path = path.cgPath // Give the mask layer the path you just draw
    maskLayer.fillRule = kCAFillRuleEvenOdd // Cut out the intersection part
    myView.layer.mask = maskLayer
}

创建 updateUI() 并使用所有点调用 overLay 方法。

func updateUI() {
    path = UIBezierPath(rect: myView.bounds)
    let viewFrames = myView.bounds
    overLay(points: CGPoint(x: viewFrames.origin.x - 15, y: viewFrames.origin.y - 15))
    overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y - 15))
    overLay(points: CGPoint(x: viewFrames.origin.x - 15, y: viewFrames.origin.y + viewFrames.height - 15))
    overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y + viewFrames.height - 15))
    overLay(points: CGPoint(x: viewFrames.origin.x - 15 , y: viewFrames.origin.y + viewFrames.height/2))
    overLay(points:  CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y + viewFrames.height/2))
}

从 viewDidLayoutSubviews() 方法调用 updateUI。

override func viewDidLayoutSubviews() {
    updateUI()
}

它将在视图上创建具有透明度的叠加层。

完整代码 sn -p

导入 UIKit

类视图控制器：UIViewController {

@IBOutlet weak var myView: UIView!

var path = UIBezierPath()
override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view, typically from a nib.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func overLay(points: CGPoint) {
    let sizes = CGSize(width: 30, height: 30)
    let circlePath = UIBezierPath(ovalIn: CGRect(origin: points, size: sizes))
    path.append(circlePath)

    let maskLayer = CAShapeLayer() //create the mask layer
    maskLayer.path = path.cgPath // Give the mask layer the path you just draw
    maskLayer.fillRule = kCAFillRuleEvenOdd // Cut out the intersection part
    myView.layer.mask = maskLayer
}

override func viewDidLayoutSubviews() {
    updateUI()
}

func updateUI() {
    path = UIBezierPath(rect: myView.bounds)
    let viewFrames = myView.bounds
    overLay(points: CGPoint(x: viewFrames.origin.x - 15, y: viewFrames.origin.y - 15))
    overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y - 15))
    overLay(points: CGPoint(x: viewFrames.origin.x - 15, y: viewFrames.origin.y + viewFrames.height - 15))
    overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y + viewFrames.height - 15))
    overLay(points: CGPoint(x: viewFrames.origin.x - 15 , y: viewFrames.origin.y + viewFrames.height/2))
    overLay(points:  CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y + viewFrames.height/2))
}

}

Answer 2

我创建了一个枚举，其中包含需要放置圆的所有角。

enum Corners {
    case topLeft
    case topRight
    case bottomLeft
    case bottomRight
    case centerLeft
    case centerRight
}

我以编程方式将圆形视图添加到视图控制器的视图并设置它的颜色。这里，我给了白色，你可以把它改成你各自的透明背景。

func addCircularViews(toCorners corners: [Corners]) {
    for corner in corners {
        let circleView = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
        circleView.layer.cornerRadius = circleView.frame.width/2
        circleView.backgroundColor = UIColor.white
        self.view.addSubview(circleView)
        setPosition(forCircularView: corner, circleView)
    }
}

我正在通过更改圆形视图的中心来设置圆形的位置。

func setPosition(forCircularView corner: Corners,_ circleView: UIView) {
    let screenFrame = UIScreen.main.bounds
    switch corner {
    case .topLeft:
        circleView.center = CGPoint(x: screenFrame.origin.x, y: screenFrame.origin.y)
    case .topRight:
        circleView.center = CGPoint(x: screenFrame.origin.x + screenFrame.width, y: screenFrame.origin.y)
    case .bottomLeft:
        circleView.center = CGPoint(x: screenFrame.origin.x , y: screenFrame.origin.y + screenFrame.height)
    case .bottomRight:
        circleView.center = CGPoint(x: screenFrame.origin.x + screenFrame.width , y: screenFrame.origin.y + screenFrame.height)
    case .centerLeft:
        circleView.center = CGPoint(x: screenFrame.origin.x , y: screenFrame.origin.y + screenFrame.height/2)
    case .centerRight:
        circleView.center = CGPoint(x: screenFrame.origin.x + screenFrame.width , y: screenFrame.origin.y + screenFrame.height/2)
    }
}

您可以在需要时调用上述函数

addCircularViews(toCorners: [.topLeft, .topRight, .centerRight, .centerLeft, .bottomLeft, .bottomRight])

由于上面是一个数组，所以可以根据需要设置角点。 希望对你有帮助！！

Answer 3

我有一个UIView 的子类来完成这些任务。基本上，它使用由UIBezierPath 创建的CAShapeLayer 作为视图的掩码。您可以自定义框架和孔的角半径。这是我的代码：

import UIKit

struct TransparentPart {
    var rect: CGRect
    var cornerRadius: CGFloat
}


class PartiallyTransparentView: UIView {
    var transparentParts: [TransparentPart] = []

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        backgroundColor?.setFill()
        UIRectFill(rect)

        let clipPath = UIBezierPath(rect: self.bounds)

        for part in transparentParts {
            let holeRect = part.rect
            let radius = part.cornerRadius

            let path = UIBezierPath(roundedRect: holeRect, cornerRadius: radius)

            clipPath.append(path)
        }

        let layer = CAShapeLayer()
        layer.path = clipPath.cgPath
        layer.fillRule = kCAFillRuleEvenOdd
        self.layer.mask = layer
        self.layer.masksToBounds = true
    }
}