ios - 在 UIView 上添加圆形模糊 mask 层

Question

我正在使用 Xcode 8 和 Swift 2.3
从 this 开始不错的帖子和my own question ，我可以获得这两种截然不同的效果，但我无法“加入”它。

:

第一个(模糊):

internal extension UIView {

    /**
     Add and display on current view a blur effect.
     */
    internal func addBlurEffect(style style: UIBlurEffectStyle = .ExtraLight, atPosition position: Int = -1) -> UIView {
        // Blur Effect
        let blurEffectView = self.createBlurEffect(style: style)
        if position >= 0 {
            self.insertSubview(blurEffectView, atIndex: position)
        } else {
            self.addSubview(blurEffectView)
        }
        return blurEffectView
    }

    internal func createBlurEffect(style style: UIBlurEffectStyle = .ExtraLight) -> UIView {
        let blurEffect = UIBlurEffect(style: style)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = self.bounds
        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        return blurEffectView
    }

}

第二个(径向渐变):

public class BlurFilterMask: CAShapeLayer {

    // MARK: - Public properties -

    public var origin: CGPoint = CGPointZero
    public var diameter: CGFloat = 0.0
    public var gradientWidth: CGFloat = 200.0
    public var gradientColorOpacity: CGFloat = 0.5

    // MARK: - Layout -

    override public func drawInContext(ctx: CGContext) {
        let clearRegionRadius = self.diameter * 0.5
        let blurRegionRadius = clearRegionRadius + self.gradientWidth

        let baseColorSpace = CGColorSpaceCreateDeviceRGB()

        let colours: [CGFloat] = [0.0, 0.0, 0.0, 0.0,     // Clear region
                                  0.0, 0.0, 0.0, self.gradientColorOpacity] // blur region color
        let colourLocations: [CGFloat] = [0.0, 0.4]
        let gradient = CGGradientCreateWithColorComponents (baseColorSpace, colours, colourLocations, 2)
        CGContextDrawRadialGradient(ctx, gradient!, self.origin, clearRegionRadius, self.origin, blurRegionRadius, .DrawsAfterEndLocation)
    }
}

如有任何提示，我们将不胜感激!

Answer 1

我做到了!

注意 self 是添加到层次结构顶部的掩码 UIView。

func setupBlur(frame frame: CGRect, center: CGPoint, diameter: CGFloat) {

    self.blurFilterMask = BlurFilterMask()
    self.blurFilterMask.diameter = diameter
    self.blurFilterMask.frame = self.frame
    self.blurFilterMask.origin = center
    self.blurFilterMask.shouldRasterize = true
    self.layer.addSublayer(self.blurFilterMask)
    self.blurFilterMask.setNeedsDisplay()

    self.viewBlur = self.addBlurEffect(style: self.blurEffectStyle, atPosition: 0)

    self.holePath = self.getHolePath(frame: frame, center: center, diameter: diameter)

    self.addMaskOnBlurView(self.holePath, center: center, diameter: diameter)

}

func addMaskOnBlurView(holePath: UIBezierPath, center: CGPoint, diameter: CGFloat?) -> UIView {
    let maskView = UIView(frame: self.viewBlur!.bounds)
    maskView.clipsToBounds = true
    maskView.backgroundColor = UIColor.clearColor()

    let blurFilterMask = ERBlurFilterMask()
    blurFilterMask.diameter = diameter ?? 10
    blurFilterMask.frame = self.frame
    blurFilterMask.origin = center
    blurFilterMask.shouldRasterize = true
    blurFilterMask.gradientColorOpacity = 1

    maskView.layer.addSublayer(blurFilterMask)
    blurFilterMask.setNeedsDisplay()

    self.viewBlur!.maskView = maskView
    return maskView
}

总结:

• 将蒙版 View 创建为叠加层，将其命名为 A
• 在 A 的图层上添加模糊滤镜蒙版
• 创建模糊 View ，将其命名为 B，并附加到顶部
• 创建另一个 View ，将其命名为 C，并添加另一个过滤掩码
• 应用C作为B的maskView

我不知道这是否是解决方案，但它对我有用。如果有人有其他更好的解决方案，请分享!