CALayer - How do I create an image with a solid background and transparent text?

Question

I'm trying to create movie generation application by using AVComposition and have a trouble in making title frame. Each frame is actually a calayer and title layer is on top of other frames.

Title(Text) needs to be transparent with black background so that they can see some part of the first content frame under title text letters.

I searched most articles about calayer mask, but nothing helped me. I thought this article ( How to make only the part covered by text/title transparent in a UIView in IOS ) is helpful and coded like Dave's way, but got only white screen.

Here is what I have done:

// create UILabel from the title text
CGRect rectFrame = CGRectMake(0, 0, videoSize.width, videoSize.height);
UILabel *lbTitle = [[UILabel alloc] initWithFrame:rectFrame];
lbTitle.text = self.titleText;
lbTitle.font = [UIFont fontWithName:@"Helvetica" size:60];
lbTitle.textColor = [UIColor blackColor];
lbTitle.backgroundColor = [UIColor whiteColor];

// get title image and create mask layer
UIGraphicsBeginImageContextWithOptions(lbTitle.bounds.size, TRUE, [[UIScreen mainScreen] scale]);
[lbTitle.layer renderInContext:UIGraphicsGetCurrentContext()];
CGImageRef viewImage = [UIGraphicsGetImageFromCurrentImageContext() CGImage];
UIGraphicsEndImageContext();

CALayer *maskLayer = [CALayer layer];
maskLayer.contents = (__bridge id)viewImage;
maskLayer.frame = rectFrame;

// create title background layer and set mastLayer as mast layer of this layer
// this layer corresponds to "UIView's layer" in Dave's method
CALayer *animatedTitleLayer = [CALayer layer];
animatedTitleLayer.backgroundColor = [UIColor whiteColor].CGColor;
animatedTitleLayer.mask = maskLayer;
animatedTitleLayer.frame = rectFrame;

...
[view.layer addSubLayer:animatedTitleLayer];

Here I used animatedTitleLayer as title background(black background), but what I see is white screen.

Anyone can help me? Thanks in advance.

Answer 1

The mask uses the alpha channel to determine what parts to mask out and what parts to keep. However, your label that you render into an image is rendered as black text on a white background so there is no transparency in the image.

You have also specified that the graphics context you are using to render the image is opaque so even if the background color of the label as was clear you would get an opaque image.

So you need to set a clear background color on the label and pass NO as the second argument when you create the graphics context.