带有遮罩层的UIVisualEffectView

时间:2016-09-20 13:10:23

标签: ios swift uivisualeffectview

我正在尝试模糊MKMapView,同时在其上方显示圆形遮罩。为了更好地形象化我的意思,您可以找到我当前状态的图像:

Current State

这几乎显示了我想要的东西,但背景(地图)应该模糊,这不是这张照片中的情况。我尝试使用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
}

总结一下这是我的问题: 如何更改我的代码以模糊mapview以及在其上方显示cirlce面具?

修改 刚刚发现如果我删除代码以添加圆形蒙版,mapview的模糊效果......也许这对解决这个问题有兴趣。

2 个答案:

答案 0 :(得分:16)

我现在找到一个解决方案后挖了一下。我假设你正在使用Xcode 8作为layer.mask有一个已知的错误,你不能同时拥有模糊和掩码。

在操场上玩弄后我已经修复了问题,因此会尝试调整您的代码以匹配我的解决方案。如果您使用"掩码"相反,blurView的属性,那么你应该没有问题。有一个错误报告发给Apple我相信关于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

如果您有任何问题,请与我们联系!

答案 1 :(得分: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
}