title: Consistenlty Centering CALayer Sublayer over a UIImageView
body: <ul>
  <li>Xcode 7.2</li>
  <li>Swift 2</li>
  </ul>
  
  <p>My issue is that I cannot consistently center my CALayer.</p>
  
  <p>I have a related SO question <a href="https://stackoverflow.com/questions/35400789/add-a-calayer-sublayer-centered-over-uiimageview">here</a>. The answer to this question was forward progress and brings me to the issue I am having now. Note in the answer to my related question, @WarrenBurton seems to only test portrait mode. </p>
  
  <p>I think this issue, which really is calculating/positioning a sublayer dead center over a UIImageView may relate to the actual size of the Image selected for the UIImageView but I could be wrong about this.</p>
  
  <p><a href="https://i.stack.imgur.com/XZIxk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XZIxk.png" alt="enter image description here"></a></p>
  
  <p>Here is my <code>print()</code> output for portrait mode rotation:</p>
  
  <pre><code>willTransitionToTraitCollection()!
  blurFilerMask != nil
  resetMaskOverlay()!
  (160.0, 128.0)
  328.0
  200.0
  BlurFilterMask -&gt; drawInContext()!
  </code></pre>
  
  <p>But the CALayer is centered in Landscape mode:</p>
  
  <p><a href="https://i.stack.imgur.com/ZLkiM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZLkiM.png" alt="enter image description here"></a></p>
  
  <p>Here is my <code>print()</code> output for landscape mode rotation:</p>
  
  <pre><code>willTransitionToTraitCollection()!
  blurFilerMask != nil
  resetMaskOverlay()!
  (284.0, 108.0)
  568.0
  200.0
  BlurFilterMask -&gt; drawInContext()!
  </code></pre>
  
  <p>My UIImage Size Inspector Screenshot, Constraints most important part to consider perhaps:</p>
  
  <p><a href="https://i.stack.imgur.com/7IBhb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7IBhb.png" alt="enter image description here"></a></p>
  
  <p>My UIImage mode is <code>Scale To Fill</code></p>
  
  <p>Here is all the code in my <code>TestViewController</code>:</p>
  
  <pre><code>import UIKit
  
  class TestViewController: UIViewController {
  
      @IBOutlet weak var heroImageView: UIImageView!
        var blurFilterMask:BlurFilterMask! = nil
  
      override func viewDidLoad() {
          super.viewDidLoad()
  
          // Do any additional setup after loading the view.
      }
  
      override func viewDidLayoutSubviews() {
          super.viewWillLayoutSubviews()
          resetMaskOverlay()
      }
  
  
      override func willTransitionToTraitCollection(newCollection: UITraitCollection, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
          super.willTransitionToTraitCollection(newCollection, withTransitionCoordinator: coordinator)
          print("willTransitionToTraitCollection()!")
  
          if blurFilterMask != nil {
              print("blurFilerMask != nil")
              blurFilterMask.removeFromSuperlayer()
              blurFilterMask = nil
          }
  
      }
  
      func resetMaskOverlay(){
          print("resetMaskOverlay()!")
  
          print(heroImageView.center)
          print(CGRectGetWidth(heroImageView.bounds))
          print(CGRectGetHeight(heroImageView.bounds))
  
          if blurFilterMask == nil {
              blurFilterMask = BlurFilterMask()
          }
  
          blurFilterMask.diameter = 80
          blurFilterMask.frame = heroImageView.bounds
          blurFilterMask.origin = heroImageView.center
          blurFilterMask.shouldRasterize = true
          heroImageView.layer.addSublayer(blurFilterMask)
          blurFilterMask.setNeedsDisplay()
  
      }
  
  }
  </code></pre>
  
  <p>Here is my CALayer which I call <code>BlurFilterMask</code>:</p>
  
  <pre><code>import UIKit
  
  class BlurFilterMask : CALayer {
  
      private let GRADIENT_WIDTH : CGFloat = 50.0
  
      var origin : CGPoint = CGPointZero {
          didSet {
              //setNeedsDisplay()
          }
      }
      var diameter : CGFloat = 50.0 {
          didSet {
              //setNeedsDisplay()
          }
      }
  
      override init() {
          super.init()
      }
  
      required init?(coder aDecoder: NSCoder) {
          fatalError("init(coder:) has not been implemented")
      }
  
      override func drawInContext(ctx: CGContext) {
          print("BlurFilterMask -&gt; drawInContext()!")
          CGContextSaveGState(ctx)
  
          let clearRegionRadius : CGFloat  = self.diameter * 0.5
          let blurRegionRadius : CGFloat  = clearRegionRadius + GRADIENT_WIDTH
  
          let baseColorSpace = CGColorSpaceCreateDeviceRGB();
          let colours : [CGFloat] = [0.0, 0.0, 0.0, 0.0,     // Clear region
              0.0, 0.0, 0.0, 0.6] // blur region color
          let colourLocations : [CGFloat] = [0.0, 0.0]
          let gradient = CGGradientCreateWithColorComponents (baseColorSpace, colours, colourLocations, 2)
  
  
          CGContextDrawRadialGradient(ctx, gradient, self.origin, clearRegionRadius, self.origin, blurRegionRadius, .DrawsAfterEndLocation);
  
  
      }
  
  }
  </code></pre>
  
  <p>Now further testing of this issue, I can demonstrate the exact opposite of my first screenshots (the first scenario was: Portrait mode is NOT centered and Landscape mode is correctly centered).</p>
  
  <p>In this next example. I have changed the UIImageView constraints so that fill the UIImageView fills the SuperView and you can see below my CALayer is correctly centered in Portrait mode but NOT Landscape mode, the exact opposite of my previous screenshot demo:</p>
  
  <p>UIImageView Constraints:
  <a href="https://i.stack.imgur.com/831F1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/831F1.png" alt="enter image description here"></a></p>
  
  <p>Portrait mode with UIImageView "fill" superview constraints:</p>
  
  <p><a href="https://i.stack.imgur.com/VcIR8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VcIR8.png" alt="enter image description here"></a></p>
  
  <p>Landscape mode with UIImageView "fill" superview constraints:</p>
  
  <p><a href="https://i.stack.imgur.com/YDONL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YDONL.png" alt="enter image description here"></a></p>