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（你已经做过）创建一个子类。但这是我使用的代码：

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

然后，您可以在MaskView中添加ViewController作为子视图。确保在故事板中选择分配了类MaskView的视图：

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

编译代码，它看起来很棒：

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

最后，这就是它在模拟器中的运行方式：

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

通过使用遮罩层使UIView的部分透明

1 个答案: