ios - Adding a circle blurred mask layer on UIView -


i'm working xcode 8 , swift 2.3
starting this nice post , my own question, can 2 distinct effects, can't "join" it.

enter image description here:

first 1 (blur):

internal extension uiview {      /**      add , display on current view 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     }  } 

second 1 (radial gradient):

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

any tips appreciated!

i did it!

notice self mask uiview added on top of hierarchy.

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 } 

summarizing:

  • create mask view overlay, call a
  • add blur filter mask on a's layers
  • create blur view, call b, , append on top
  • create view, call c, , add filter mask
  • apply c maskview of b

i don't know if solution, worked me. if have better solution please share it!


Comments

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

javascript - jQuery UI Splitter/Resizable for unlimited amount of columns -

javascript - IE9 error '$'is not defined -