如何创建一个带有透明圆圈的 UIView(快速)? [英] How do I create a UIView with a transparent circle inside (in swift)?

问题描述

我想创建一个如下所示的视图:

I want to create a view that looks like this:

我想我需要的是带有某种遮罩的 uiview，我可以使用 UIBezierpath 制作圆形形状的遮罩，但是我无法反转它以遮罩除圆圈之外的所有内容.我需要它作为视图的遮罩而不是填充层，因为我打算遮罩的视图上有一个 UIBlurEffect.最终目标是在我现有的视图之上为这个 UIView 设置动画以提供指导.

I figure what I need is a uiview with some sort of mask, I can make a mask in the shape of a circle using a UIBezierpath, however I cannot invert this makes so that it masks everything but the circle. I need this to be a mask of a view and not a fill layer because the view that I intend to mask has a UIBlurEffect on it. The end goal is to animate this UIView overtop of my existing views to provide instruction.

请注意，我使用的是 swift.有没有办法做到这一点?如果是这样，如何?

Please note that I am using swift. Is there away to do this? If so, how?

推荐答案

再次更新 Swift 4 &删除了一些项目以使代码更紧凑.

Updated again for Swift 4 & removed a few items to make the code tighter.

请注意 maskLayer.fillRule Swift 4 和 Swift 4.2 的设置不同.

func createOverlay(frame: CGRect,
                   xOffset: CGFloat,
                   yOffset: CGFloat,
                   radius: CGFloat) -> UIView {
    // Step 1
    let overlayView = UIView(frame: frame)
    overlayView.backgroundColor = UIColor.black.withAlphaComponent(0.6)
    // Step 2
    let path = CGMutablePath()
    path.addArc(center: CGPoint(x: xOffset, y: yOffset),
                radius: radius,
                startAngle: 0.0,
                endAngle: 2.0 * .pi,
                clockwise: false)
    path.addRect(CGRect(origin: .zero, size: overlayView.frame.size))
    // Step 3
    let maskLayer = CAShapeLayer()
    maskLayer.backgroundColor = UIColor.black.cgColor
    maskLayer.path = path
    // For Swift 4.0
    maskLayer.fillRule = kCAFillRuleEvenOdd
    // For Swift 4.2
    maskLayer.fillRule = .evenOdd
    // Step 4
    overlayView.layer.mask = maskLayer
    overlayView.clipsToBounds = true

    return overlayView
}

正在发生的事情的粗略分类:

A rough breakdown on what is happening:

1. 创建一个大小为指定框架的视图，黑色背景设置为 60% 不透明度
2. 使用提供的起点和半径创建绘制圆的路径
3. 为要移除的区域创建遮罩
4. 敷面膜&裁剪到边界

以下代码片段将调用它并在屏幕中间放置一个半径为 50 的圆:

The following code snippet will call this and place a circle in the middle of the screen with radius of 50:

let overlay = createOverlay(frame: view.frame,
                            xOffset: view.frame.midX,
                            yOffset: view.frame.midY,
                            radius: 50.0)
view.addSubview(overlay)

看起来像这样:

这篇关于如何创建一个带有透明圆圈的 UIView(快速)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！