带有蒙版层的UIVisualEffectView [英] UIVisualEffectView with mask layer

问题描述

我正在尝试模糊MKMapView，同时在其上方显示一个圆形蒙版.为了更好地了解我的意思，您可以找到一张附有当前状态的图像:

I am trying to blur a MKMapView while also displaying a circle mask above it. To better visualize what I mean with this you can find an image of my current state attached:

这几乎显示了我想要的内容，但是背景(地图)应该模糊了，这不是这张照片中的情况.我尝试使用UIVisualEffectView，但似乎在那儿做错了.这是我尝试过的:

This shows nearly what I want but the background (the map) should be blurred which is not the case in this picture. I tried to work with UIVisualEffectView, but it seems I am doing something wrong there. Here is what I tried:

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
}

总结一下是我的问题: 如何更改代码以使地图视图模糊以及在其上方显示cirlce蒙版?

To summarize here is my question: How do I have to change my code in order to blur the mapview aswell as show the cirlce mask above it ?

编辑 刚刚发现，如果删除代码以添加圆形蒙版，则mapview的模糊效果会起作用.也许这对解决此问题很有帮助.

EDIT Just found out that the blur of the mapview works if I remove the code to add the circle mask... Maybe this is of any interest in order to solve this problem.

推荐答案

Ive经过一番摸索之后，现在找到了解决方案.我假设您将Xcode 8用作layer.mask有一个已知的错误，即在同一图层上不能同时具有模糊和蒙版.

Ive now found a solution after digging around for a bit. Im assuming you're using Xcode 8 as the layer.mask has a known bug where you cannot have both a blur, and a mask on the same layer.

在操场上弄乱后，我已解决了问题，因此将尝试调整您的代码以匹配我的解决方案.如果改为使用blurView的"mask"属性，则应该没有问题.我认为有关于Apple.Blayer.mask无法正常工作的错误报告

After messing around with a playground I have fixed the problem, so will try to adapt your code to match my solution. If you use the "mask" property of the blurView instead, then you should have no issues. There has been a bug report made to Apple I believe in regards to the layer.mask not working

这是您当前的代码结尾

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

而不是此，请尝试使用以下内容:

Instead of this, try using the following:

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

让我知道您是否有任何问题！

Let me know if you have any issues!

这篇关于带有蒙版层的UIVisualEffectView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！