How to draw text with attributes (Specifically Stroke and Fill color) in UIGraphicsImageContext for iPhone

Question

I am trying to create an image of text to put on top of another image. The text needs to have a white fill and a black stroke outline. I am using objective-C and it is for the iPhone. I can get the text to show up; however, I cannot seam to figure out how to get the stroke and fill color to change.

self.bigImage is a pointer to a UIImage in my xib.

Here is my code: (This code works... I want it to have a black stroke with white fill however)

- (IBAction)submitBtn:(id)sender {

    UIFont *myfont = [UIFont fontWithName:@"myfont" size:32];

    UIImage *textImage = [self imageFromText:@"teststring" font:myfont];
    CGSize finalSize = [self.bigImage.image size];
    CGSize textSize = [textImage size];

    UIGraphicsBeginImageContext(finalSize);
    [self.bigImage.image drawInRect:CGRectMake(0,0, finalSize.width, finalSize.height)];
    [textImage drawInRect:CGRectMake(0, 0, textSize.width, textSize.height)];

    UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    self.bigImage.image = newImg;
}

-(UIImage *)imageFromText:(NSString *)text font:(UIFont *)font {
    CGSize size  = [text sizeWithFont:font];

    // check if UIGraphicsBeginImageContextWithOptions is available (iOS is 4.0+)
    if (UIGraphicsBeginImageContextWithOptions != NULL)
        UIGraphicsBeginImageContextWithOptions(size,NO,0.0);
    else
        // iOS is < 4.0
        UIGraphicsBeginImageContext(size);

    [text drawAtPoint:CGPointMake(0.0, 0.0) withFont:font];

    // transfer image
    UIImage *Image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return Image;
}

I can get it to render one or the other. If I add this code I get a black stroke:

CGContextSetTextDrawingMode(UIGraphicsGetCurrentContext(), kCGTextStroke);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2);
CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor blackColor] CGColor]);

If I add this code I get a white font:

CGFloat fontColor[4] = {255,255,255,1};
CGContextSetFillColor(UIGraphicsGetCurrentContext(), fontColor);

But If I add both snipets I get the black stroke but the font color is transparent...

Solved: thanks to a little help from 'Brane':

I needed to add this bit of code before the drawAtPoint:

CGFloat fontColor[4] = {255,255,255,1};
CGContextSetFillColor(UIGraphicsGetCurrentContext(), fontColor);
CGContextSetTextDrawingMode(UIGraphicsGetCurrentContext(), kCGTextFillStroke);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2);
CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor blackColor] CGColor]);

score 8 · Answer 1 · edited May 23 '17 at 10:29

8

I fixed with:

[theText drawAtPoint:CGPointMake(x, y)
                  withAttributes:@{NSFontAttributeName:[UIFont fontWithName:@"Helvetica" size:8], NSForegroundColorAttributeName:[UIColor whiteColor] }];

finally!!!

thanks to levi

Levi

edited May 23 '17 at 10:29

Community

1
1

answered Jan 26 '14 at 19:35

Nicola

81
1
3

score 3 · Answer 2 · answered Feb 25 '13 at 19:36

3

Two problems to solve.

First, in order to draw the background, you can't rely on drawAtPoint:withFont: as it does not draw background.

Use CGContextFillRect to draw your background color:

[[UIColor whiteColor] set];
CGContextFillRect( UIGraphicsGetCurrentContext(), CGRectMake( 0, 0, size.width, size.height )

Second, you need to set the stroke colour using

[[UIColor blackColor] set];

prior to calling [text drawAtPoint:CGPointMake(0.0, 0.0) withFont:font];

answered Feb 25 '13 at 19:36

Brane

810
1
6
13

I am not looking to make the background color white but the font itself white with a stroke of black. I want the color of the background to be transparent. – werdsackjon Feb 25 '13 at 20:06

score 3 · Accepted Answer · answered Feb 25 '13 at 21:54

I fixed this by modifying Brane's post... I needed to add this snipet of code before drawAtPoint...

CGFloat fontColor[4] = {255,255,255,1};
CGContextSetFillColor(UIGraphicsGetCurrentContext(), fontColor);
CGContextSetTextDrawingMode(UIGraphicsGetCurrentContext(), kCGTextFillStroke);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2);
CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor blackColor] CGColor]);

How to draw text with attributes (Specifically Stroke and Fill color) in UIGraphicsImageContext for iPhone

3 Answers3