Add text to CALayer : drawInRect not working

Question

I did the following :

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{

      UIGraphicsPushContext ( ctx );

      CGRect r = CGRectMake( 500, 300, 200, 100 );
      NSString *text = [[NSString alloc] initWithString:@"raaaaaaaa!"];
      UIColor *color = [ UIColor colorWithRed: (200.0f)  green: (100.0)  blue:(200.0f) alpha: 1.0f ];
      [color set];

      [ text drawInRect: r withFont:[UIFont systemFontOfSize:50] lineBreakMode: UILineBreakModeWordWrap alignment: UITextAlignmentLeft ];
      [text release];

      UIGraphicsPopContext();
    }
  }
}

The above code is not working. Why?

If i do the following instead, it is working:

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
      UIGraphicsPushContext ( ctx );

      CATextLayer *label = [[CATextLayer alloc] init];
      [label setFont:@"Didot"];
      [label setFontSize:50];  
      [label setFrame:CGRectMake( 400, 300, 400, 100 )];
      [label setString:@"Helloooooooooooooooooo"];
      [label setAlignmentMode:kCAAlignmentCenter];
      [label setForegroundColor:[[UIColor blueColor] CGColor]];
      [layer addSublayer:label];
      [label release];

      UIGraphicsPopContext();
  }
}

What is the difference and why drawInRect does nothing?

Thank you

EDIT So, I was not using UIColor properly, so I changed

UIColor *color = [ UIColor colorWithRed: (200.0f)  green: (100.0)  blue:(200.0f) alpha: 1.0f ];

for this

UIColor *color = [UIColor colorWithRed:200 / 255.0 green:100 / 255.0 blue: 200 / 255.0 alpha: 1.0];

Still no luck, I can't see any text when using drawInRect

Answer 1

There are two questions in you question:

The above code is not working. Why?

At first I thought that the text didn't show up because it was drawn with white on white. While it may still have been so, that is not the only problem.

The rectangle that you are drawing your text into (r) is relative to the bounds of the layer you are drawing in. I.e. if you want to draw in the top left corner of the layer, the origin of the rect should be (0, 0). The above code is still not working though.

If you inspect the CGSize that drawInRect:withFont:... returns (the size of the rendered text) you can see that the size of the rendered text is 0 wide. This is an indication that the height of 100 for the rectangle to draw in is not enough. Increasing the height of the rectangle solves this and now the text is visible. If you are drawing some text inside a layer, maybe the most sensible rectangle to draw in is the bounds of the layer (CGRect r = [layer bounds];).

What I did to make it work:

• Changed text color
• Changed origin of r to (0,0)
• Increased height of r

What is the difference [...] ?

In the first you are drawing text into the graphics context of the layer (what drawLayer:inContext: is supposed to do) but in the seconds example you are adding another layer to the hierarchy of the layer instead of drawing inside it. Every time your layer will redraw, a new text layer will be added to it. So nothing is actually drawn into the layers graphics context.

What happens next, after your layer has drawn itself (empty), is that the sublayers of your layers draw themselves and their content is composed on top of your layer. That is why you see the text of the text layer.

If you add a text layer like this you can make your code more efficient by not having to do any manual drawing. This requires that the text layer is added to your layer at some earlier point (only once) and that you don't do any custom drawing (it's often slow).