Question

I would like to display text with another color in it’s border (outline).
i’m trying to display a text in MapOverlayView using

[text drawAtPoint:CGPointMake(0,30) withFont:[UIFont fontWithName:@"Helvetica-Bold" size:(3 * MKRoadWidthAtZoomScale(zoomScale))] 

it works fine except I need text to be displayed outlines.

Answer 1

Yes, you can display outlined text with the aid of CGContextSetDrawingMode(CGContextRef, CGTextDrawingMode), although you’ll probably need to adjust some numbers and colors to make it look good.

It make seem logical to use kCGTextFillStroke, but that can make the stroke overwhelm the fill. If you stroke, then fill, as in the block below, you get a visible outline behind readable text.

CGContextRef context = UIGraphicsGetCurrentContext();

CGPoint point = CGPointMake(0,30);
CGFloat fontSize = (3 * MKRoadWidthAtZoomScale(zoomScale));
UIFont *font = [UIFont fontWithName:@"Helvetica-Bold" size:fontSize];

// Draw outlined text.
CGContextSetTextDrawingMode(context, kCGTextStroke);
// Make the thickness of the outline a function of the font size in use.
CGContextSetLineWidth(context, fontSize/18);
CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
[text drawAtPoint:point withFont:font];

// Draw filled text.  This will make sure it's clearly readable, while leaving some outline behind it.
CGContextSetTextDrawingMode(context, kCGTextFill);
CGContextSetFillColorWithColor(context, [[UIColor blueColor] CGColor]);
[text drawAtPoint:point withFont:font];