掩膜层UIVisualEffectView

Question

我试图模糊一个MKMapView，同时也显示在它上面的圆圈面具。为了更好地形象化我的意思，您可以找到我当前状态的图像：

​

​

这几乎显示了我想要的东西，但是背景(地图)应该是模糊的，这在这张图片中不是这样的。我试着和UIVisualEffectView一起工作，但是我好像做错了什么。以下是我尝试过的：

func createOverlay(at: CGPoint) {
    var blur: UIView!
    blur = UIVisualEffectView (effect: UIBlurEffect (style: UIBlurEffectStyle.dark))

    blur.frame = self.mapView.frame
    blur.isUserInteractionEnabled = false
    self.mapView.addSubview(blur)

    let circleSize: CGFloat = 200

    let path = UIBezierPath (
        roundedRect: blur.frame,
        cornerRadius: 0)

    let circle = UIBezierPath (
        roundedRect: CGRect (origin: CGPoint(x:at.x - circleSize/2, y: at.y-circleSize/2),
                             size: CGSize (width: circleSize, height: circleSize)), cornerRadius: circleSize/2)

    path.append(circle)
    path.usesEvenOddFillRule = true

    let maskLayer = CAShapeLayer()
    maskLayer.path = path.cgPath
    maskLayer.fillRule = kCAFillRuleEvenOdd

    let borderLayer = CAShapeLayer()
    borderLayer.path = circle.cgPath
    borderLayer.strokeColor = UIColor.white.cgColor
    borderLayer.lineWidth = 10
    blur.layer.addSublayer(borderLayer)

    blur.layer.mask = maskLayer
}

总之，我的问题是：，我如何更改我的代码，以模糊地图视图，并显示上面的圆圈面具?

编辑刚刚发现，如果我删除添加圆圈掩码的代码，地图视图的模糊会工作.也许这是为了解决这个问题而引起的任何兴趣。

Answer 1

经过一番探索，我现在找到了一个解决方案。我假设您使用的是Xcode 8，因为layer.mask有一个已知的bug，您不能在同一层同时使用模糊和掩码。

在操场上捣乱之后，我修复了这个问题，因此将尝试调整您的代码以匹配我的解决方案。如果您使用blurView的“掩码”属性，那么您应该没有问题。有一个错误报告给苹果，我相信是关于layer.mask不起作用的

这是最后的当前代码。

let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
maskLayer.fillRule = kCAFillRuleEvenOdd

let borderLayer = CAShapeLayer()
borderLayer.path = circle.cgPath
borderLayer.strokeColor = UIColor.white.cgColor
borderLayer.lineWidth = 10
blur.layer.addSublayer(borderLayer)

blur.layer.mask = maskLayer

而不是这样，尝试使用以下方法：

let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
maskLayer.fillRule = kCAFillRuleEvenOdd

let borderLayer = CAShapeLayer()
borderLayer.path = circle.cgPath
borderLayer.strokeColor = UIColor.white.cgColor
borderLayer.fillColor = UIColor.clear.cgColor //Remember this line, it caused me some issues
borderLayer.lineWidth = 10

let maskView = UIView(frame: self.view.frame)
maskView.backgroundColor = UIColor.black
maskView.layer.mask = maskLayer

blur.layer.addSublayer(borderLayer)
blur.mask = maskView

如果你有什么问题请告诉我！

Answer 2

除了Jack的解决方案之外，如果您使用的是iOS >11，那么只需将blur.layer.mask设置为maskLayer：

if #available(iOS 11.0, *) {
    blur.layer.mask = maskLayer
} else {
    let maskView = UIView(frame: self.view.frame)
    maskView.backgroundColor = UIColor.black
    maskView.layer.mask = borderLayer
    blur.mask = maskView
}