CODEWITHSUNDEEP
iosobjective-cfontsuiimagestroke
caoimghgin
caoimghgin

Reputation: 629

iOS, Draw text with stroke on UIImage

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;

}

Upvotes: 2

Views: 11289

Answers (2)

MobileVet
MobileVet

Reputation: 2958

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];

Upvotes: 8

caoimghgin
caoimghgin

Reputation: 629

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;

}

Upvotes: 3

Related Questions