使用遮罩层使部分 UIView 透明

Question

我正在努力实现这样的目标：

粉色部分固定，灰色部分可能会滚动。我有以下视图结构：

我目前有这个代码：

extension FloatingPoint {

    var degreesToRadians: Self { return self * .pi / 180 }
    var radiansToDegrees: Self { return self * 180 / .pi }

} 

@IBDesignable
class MaskView: UIView {

    let startAngle: CGFloat = 180
    let endAngle: CGFloat = 0

    override func layoutSubviews() {
        super.layoutSubviews()

        let multiplier: CGFloat = (frame.size.height * 3)
        let maskLayer = CAShapeLayer()
        maskLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2, y: frame.size.height * multiplier),
                                  radius: frame.size.height * multiplier,
                                  startAngle: startAngle.degreesToRadians,
                                  endAngle: endAngle.degreesToRadians,
                                  clockwise: true).cgPath

        layer.mask = maskLayer
    }

}

遮罩视图设置为灰色背景色。

我遇到的问题是圆形部分不透明。将颜色更改为 UIColor.clear 只会使圆形部分消失。我是否从根本上为此采取了错误的方法？如有任何帮助，我们将不胜感激。

Answer 1

首先，我们需要从 UIView 创建一个子 class（您已经这样做了）。但这是我使用的代码：

private extension FloatingPoint {
    var degreesToRadians: Self { return self * .pi / 180 }
    var radiansToDegrees: Self { return self * 180 / .pi }
}

@IBDesignable class MaskView: UIView {
    let startAngle: CGFloat = 180
    let endAngle: CGFloat = 0

    override func layoutSubviews() {
        super.layoutSubviews()

        // The multiplier determine how big the circle is
        let multiplier: CGFloat = 3.0
        let radius: CGFloat = frame.size.width * multipler
        let maskLayer = CAShapeLayer()
        let arcCenter = CGPoint(x: frame.size.width / 2, y: radius)
        maskLayer.path = UIBezierPath(arcCenter: arcCenter,
                                      radius: radius,
                                      startAngle: startAngle.degreesToRadians,
                                      endAngle: endAngle.degreesToRadians,
                                      clockwise: true).cgPath
        layer.mask = maskLayer
    }
}

然后可以在ViewController中添加一个MaskView作为subView。确保 select 视图在情节提要中分配了 class MaskView：

现在我们有一个非常简单的视图层次结构：

编译代码，看起来不错：

如果您想要一个被屏蔽的可滚动子视图，请将其添加为 maskView 的子视图。以下是视图层次结构对此的处理方式：

最后，这是它在模拟器中的样子运行：

参考：https://github.com/yzhong52/Example-LayerMask

使用遮罩层使部分 UIView 透明

Make parts of UIView transparent by using a masking layer

cashapelayer

uibezierpath

swift