Why is CALayer mask not centered and off by a few pixels? - ios

Question

I have the following code:
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
var gradient = new CAGradientLayer();
gradient.Frame = view.Bounds;
gradient.Colors = colors;
var mask = new CALayer();
mask.Frame = view.Bounds;
mask.Contents = view.Image.CGImage;
mask.ContentsGravity = CALayer.GravityCenter;
gradient.Mask = mask;
view.Layer.AddSublayer(gradient);
}
which produces the following result:
"view" is a UIImageView which is centered perfectly.
The number "1" is exactly in the middle. Here you can see that the mask is not centered perfectly.
The image here is the heart icon from the standard resources, it's not a custom image. (If e.g. used in a button, then it's centered perfectly).
Before posting I've tried all possible combinations when it comes to setting Frame and Bounds, the mask is always off-center by a few pixels.
Someone else reported a similar issue here, but there was no solution: Gradient Color over Template Image in Swift 4
This makes me believe that there's a bug with how masks are applied. Could anyone confirm?

Answer 1

There’s no bug with masking. This is crucial stuff, basic to all drawing. If there were a bug the whole interface would be broken. The bug is in your code.
It's all basically just a matter of timing. Do not talk about any frames or bounds until you know what they actually are.
To demonstrate, I'm going to work backwards: first I'll show you the result of my code, then I'll show you the code. Here's the result. I start with a storyboard that has a square centered by autolayout, so you know I'm not cheating:
Now I run the app and superimpose over the entire screen a gradient layer with a centered heart image mask:
As you can see, the heart is in exactly the right place. It is centered in precisely the same sense as the yellow square, and that is why it appears centered in the square.
Now here's the code. Notice that the assembly work is done just once, in viewDidLoad, but all the measurement work is done when we have actual measurements to work with, namely, in viewDidLayoutSubviews. This is Swift but you should have no difficulty translating (C# or whatever):
class ViewController: UIViewController {
let gradient : CAGradientLayer = {
let g = CAGradientLayer()
g.colors = [UIColor.red.cgColor, UIColor.green.cgColor]
return g
}()
let mask = CALayer()
let image : UIImage = {
let im = UIImage(systemName: "heart.fill")!
return im
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.layer.addSublayer(gradient)
mask.contents = image.cgImage
mask.contentsGravity = .center
gradient.mask = mask
}
override func viewDidLayoutSubviews() {
gradient.frame = view.bounds
mask.frame = gradient.bounds
}
}
Go ye and do likewise.