ios - 如何在 UIView 中制作透明孔

Question

围绕 UIView 的边缘创建圆圈的最佳方法是什么？圆圈必须是透明的，我用草图创建它

Answer 1

我已经通过使用 UIBezierPath 和 CAShapeLayer 实现了这件事

I am taking outlet of view from storyboard.

@IBOutlet weak var myView: UIView!

Create an object of UIBezierPath()

var path = UIBezierPath()

Create a method which take center point of circle as parameter and we create another UIBezierPath() as circlePath which is circle and we append the circle on previous UIBezierPath() path.
Know take a CAShapeLayer and cut the 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
}

Create updateUI() and call overLay methods with all points.

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

call updateUI from viewDidLayoutSubviews() method.

override func viewDidLayoutSubviews() {
    updateUI()
}

它将在 View 上创建透明的叠加层。

Full code snippet

导入 UIKit

类 View Controller :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))
}