iOS, Draw text with stroke on UIImage

Question

I am currently drawing text onto a UIImage which appears in an AnnotationView in an iOS Map - custom icons which appear at certain long/lat coordinates. Works well. However, I would like to draw this text with a white stroke (you might call it an outline).

// Draw text and add to a UIImage iOS 5/6

+ (UIImage*)drawText:(NSString*)string inImage:(UIImage*)image atPoint:(CGPoint)point {

    UIFont *font = [UIFont boldSystemFontOfSize:12];
    UIGraphicsBeginImageContext(image.size);
    [image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];

    CGRect rect = CGRectMake(point.x, point.y, image.size.width, image.size.height);
    [[UIColor whiteColor] set];
    [string drawInRect:CGRectIntegral(rect) withFont:font];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;

}

Solution 1

NSAttributedString is definitely the way to go, especially if you want it to work in iOS7. For your example, you can just replace the two text blocks with the following:

// draw stroke
NSMutableDictionary *attributes = [[NSMutableDictionary alloc] init];
[attributes setObject:font forKey:NSFontAttributeName];
[attributes setObject:[NSNumber numberWithFloat:4] forKey:NSStrokeWidthAttributeName];
[attributes setObject:[UIColor whiteColor] forKey:NSStrokeColorAttributeName];
[self.text drawInRect:rect withAttributes:attributes];

// draw fill
[attributes removeObjectForKey:NSStrokeWidthAttributeName];
[attributes removeObjectForKey:NSStrokeColorAttributeName];
[attributes setObject:[UIColor blackColor] forKey:NSForegroundColorAttributeName];
[self.text drawInRect:rect withAttributes:attributes];

Solution 2

Took more time and effort than I thought, but in case anyone out there is looking for the same solution...Apparently not working under iOS7 and will update when I find the answer

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UIImage *backgroundImage = [UIImage imageNamed:@"abstract_art_masterpiece_b.jpg"];
    UIImage *textWithStrokeImage = [RJViewController drawTextWithStroke:@"unit 111"];
    UIImage *image = [RJViewController placeImage:textWithStrokeImage onImage:backgroundImage];

    self.imageView.image = image;
}

+ (UIImage*)placeImage:(UIImage*)image1 onImage:(UIImage*)image2 {

    CGSize size = image2.size;

    if ([UIScreen instancesRespondToSelector:@selector(scale)] && [[UIScreen mainScreen] scale] == 2.0f) {
        UIGraphicsBeginImageContextWithOptions(size, NO, 2.0f);
    } else {
        UIGraphicsBeginImageContext(size);
    }

    [image2 drawAtPoint:CGPointMake(0, 0)];
    [image1 drawAtPoint:CGPointMake(0, 0)];

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

    return result;
}

+ (UIImage*)drawTextWithStroke:(NSString*)string {

    // set rect, size, font

    CGRect rect = CGRectMake(0, 0, 88, 24);
    CGSize size = CGSizeMake(rect.size.width, rect.size.height);
    UIFont *font = [UIFont fontWithName:@"Helvetica-Bold" size:12];

    // retina display, double resolution

    if ([UIScreen instancesRespondToSelector:@selector(scale)] && [[UIScreen mainScreen] scale] == 2.0f) {
        UIGraphicsBeginImageContextWithOptions(size, NO, 2.0f);
    } else {
        UIGraphicsBeginImageContext(size);
    }

    CGContextRef context = UIGraphicsGetCurrentContext();

    // draw stroke

    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(context, 4.0);
    CGContextSetTextDrawingMode(context, kCGTextStroke);
    [string drawInRect:CGRectIntegral(rect) withFont:font];

    // draw fill

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextSetTextDrawingMode(context, kCGTextFill);
    [string drawInRect:CGRectIntegral(rect) withFont:font];

    // convert to image and return

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;

}