2016-11-08 83 views
3

我在Xcode 8和雨燕2.3
this不錯的職位和my own question開始工作了一圈模糊的遮罩層,我能得到這個兩個不同的效果,但我不能「加入」了。添加上的UIView

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

任何提示,將不勝感激!

+0

最近你不是問過類似的問題嗎? http://stackoverflow.com/questions/40256942/draw-hole-on-uiblureffect/40401855#40401855 –

+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的掩碼視圖

我不知道這是否是解決方案,但它對我有用。 如果有人有另一個更好的解決方案,請分享!