1

I am having some difficulty understanding on how layer masking works. Right now, I have a UIView with UILabels on it. I picture two layers - one with the UIView in the back and one for the labels on top. If I mask the UIView layer, the labels will be affected by the mask too.

The UILabels are children of the parent UIView, so I can understand a parent mask affecting the children as well.

However, when I look at it in terms of layers, it doesn't seem to make sense. Why does masking the deepest layer affect those on top?

rmaddy
  • 314,917
  • 42
  • 532
  • 579
Eric Gao
  • 3,502
  • 2
  • 19
  • 29

3 Answers3

12

Think of layers as sheets of paper. Think of the view's layer as a big sheet of white paper. As you figured out, the labels' layers are children of the view's layers. To relate, think of the labels' layers being strips of paper glued onto the big view's layer-sheet.

Let's say you wish to mask the layer with a circle. To translate that into our little analogy, you wish to cover the big view's layer-sheet with Harry Potter's invisibility cloak, with a circle shaped hole in it.

To do that, you'd cut the invisibility cloak to the same size as that of your view's layer-sheet.

cloakLayer.frame = bigViewLayer.frame;

Then, you'd carefully cut out a circle from it.

cloakLayer.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:15.0 startAngle:0.0 endAngle:2 * M_PI clockwise:YES];
cloakLayer.fillColor = [UIColor blackColor].CGColor; // the hole

Then, you'd paste this cloak-with-a-hole onto your big view's layer-sheet, carefully aligning the edges.

bigViewLayer.mask = cloakLayer;

What's gonna go invisible? Anything on the sheet (because the cloak was cut to the sheet's dimensions) that doesn't fall into the circle you removed from the cloak. That's the mask property.

Let's talk about the masksToBounds property.

Let's say while pasting the strips of label layer-sheets onto the big view's layer-sheet, you decided to place only half of the strip on the sheet, and made the rest hang off the edge(s).

Let's say you set masksToBounds to YES. What the gods of decoupage would do now is neatly cut off the parts of your labels' strips that are not within the edges of the big view's layer-sheet. That's the masksToBounds property.

Let's talk about borders. This is simple. Just pick a sharpie of borderColor whose nib is borderWidth points wide, and carefully draw on the edges of the view's layer-sheet. That's it.

I hope you get things now and can make your own analogies for other properties of the wonderful CALayer.

duci9y
  • 4,128
  • 3
  • 26
  • 42
  • Pure poetry, and great analogies! – jrturton Jul 22 '14 at 21:27
  • This is fantastic, thanks for writing this up. The cloak metaphor is great, but I'm having trouble seeing how it applies if I apply a mask on the labelLayer. The label gets masked, but not the background. The way I see it, shouldn't everything under the cloak (including the bigViewLayer) get masked too? – Eric Gao Jul 22 '14 at 22:44
  • 1
    No, because it's only laid on the label, so you can see through it to the background beneath. If you were wearing an invisibility cloak, and stood in front of a wall, an observer would still see the wall, wouldn't they? – jrturton Jul 23 '14 at 07:25
  • @user3854397 What jrturton said. A cloak isn't gonna help you see through the earth itself, right? A mask isn't gonna burn a hole into your phone's screen now, is it? – duci9y Jul 23 '14 at 07:42
  • What if I only wanted the cloak to be laid on the bigViewLayer, slipped in between the label and the view? Is that possible? – Eric Gao Jul 23 '14 at 10:09
  • @user3854397 You need to realise that the invisibility cloak cannot have anything stuck on it. – duci9y Jul 23 '14 at 14:11
  • you can't use decoupage on this site dude :) – Fattie Jan 31 '17 at 15:25
0

As you said, the UIView is the parent, and the UILabels are the children. When it comes time to update the screen, the UIView starts with a blank canvas. It draws itself into the canvas, and then has the children draw themselves into the canvas. When the children are drawing, they are subject to constraints imposed by the parent, e.g. clipping and masking.

user3386109
  • 34,287
  • 7
  • 49
  • 68
0

iOS CALayer.mask

[CALayer]

[iOS CALayer.masksToBounds]

CALayer has a mask property which is CALayer, which applies mask's alpha channel to mask parent's layer.

layer + mask = masked layer

yoAlex5
  • 29,217
  • 8
  • 193
  • 205