在UIView上添加圆圈模糊遮罩层

时间:2016-11-08 08:16:19

标签: ios objective-c swift xcode blur

我正在使用Xcode 8和Swift 2.3
this好帖和my own question开始,我可以得到这两个截然不同的效果,但我无法加入"它

enter image description here

第一个(模糊):

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

任何提示都将不胜感激!

1 个答案:

答案 0 :(得分:0)

我做到了!

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

汇总:

  • 创建掩码视图作为叠加层,将其命名为A
  • 在A的图层上添加模糊滤镜遮罩
  • 创建模糊视图,将其命名为B,然后追加到顶部
  • 创建另一个视图,将其命名为C,然后添加另一个过滤器掩码
  • 将C应用为B
  • 的maskView

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