3

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.

Community
  • 1
  • 1
Alex
  • 159
  • 14
  • I think you're missing to add mask layer? `[self.view.layer addSublayer: animatedTitleLayer]` – Mani Mar 13 '14 at 05:30
  • Sorry, I missed to write that line. It is already there and Ijust edited it. – Alex Mar 13 '14 at 07:11

1 Answers1

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.

David Rönnqvist
  • 56,267
  • 18
  • 167
  • 205
  • I tried your method, but it shows contrary result - i.e. black title and transparent background. But what I need is transparent title and black background. – Alex Mar 13 '14 at 08:16
  • So your question isn't really "CALayer mask doesn't work with another CALayer". It is "How do I crete an image with a solid background and transparent text?", right? – David Rönnqvist Mar 13 '14 at 08:24
  • Maybe you are right. I gave wrong title to my question. – Alex Mar 13 '14 at 08:38
  • @Richard Anyway, I guess that this is the missing piece: ["Crop letter from image using Masking"](http://stackoverflow.com/q/17826160/608157) – David Rönnqvist Mar 13 '14 at 08:44