How to draw bordered letter? - iphone

Question

I am searching about drawing bordered text on UIView.
Implemented following method :
- (void)drawRect:(CGRect)rect {
//TODO draw bordered text here.
}
How to draw it ?
I mean each letter is bordered of whole text.
Thanks in advance.

Answer 1

To display bordered text (if I understand correctly what you want) you should set text drawing mode to kCGTextFillStroke (and set appropriate values for text drawing parameters, such as stroke and fill colors etc)
// Choose appropriate text font
CGContextSelectFont(context, [[UIFont boldSystemFontOfSize:24].fontName UTF8String], (int)fontSize, kCGEncodingMacRoman);
// Set text drawing mode
CGContextSetTextDrawingMode(context, kCGTextFillStroke);
// Set appropriate color/line width values
// Here we're set to draw white letters with black border
CGContextSetRGBStrokeColor(context, 0, 0, 0, 1);
CGContextSetRGBFillColor(context, 1, 1, 1, 1);
CGContextSetLineWidth(context, 1);
// Set this transformations or text will be displayed upside-down
CGAffineTransform xform = CGAffineTransformMake(1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
CGContextSetTextMatrix(context, xform);
// Display text
CGContextShowTextAtPoint(...);
Edit: As Quartz does not work well with unicode, to draw unicode strings you'll need to use other APIs. I managed to draw "bordered" unicode string using NSAttributedString and OHAttributedLabel (thanks to this answer for that custom control). Sample code to get required string in some view controller:
- (void)viewDidLoad
{
[super viewDidLoad];
NSMutableAttributedString *s = [[NSMutableAttributedString alloc] initWithString:#"您好世界"];
[s addAttributes:[NSDictionary dictionaryWithObject:[NSNumber numberWithFloat:-3.0f] forKey:(NSString*)kCTStrokeWidthAttributeName]
range:NSMakeRange(0, [s length])];
[s addAttributes:[NSDictionary dictionaryWithObject:(id)[UIColor greenColor].CGColor forKey:(NSString*)kCTStrokeColorAttributeName]
range:NSMakeRange(0, [s length])];
[s addAttributes:[NSDictionary dictionaryWithObject:(id)[UIColor redColor].CGColor forKey:(NSString*)kCTForegroundColorAttributeName]
range:NSMakeRange(0, [s length])];
[s setFont:[UIFont boldSystemFontOfSize:28.0f]];
[s setTextColor:[UIColor redColor]];
OHAttributedLabel *l = [[OHAttributedLabel alloc] initWithFrame:CGRectMake(40.0f, 40.0f, 200.0f, 80.0f)];
l.centerVertically = YES;
[l setAttributedText: s];
[self.view addSubview: l];
[l release];
}
Note that you'll need to link with CoreText.framework to make that work, and code uses some convenience methods provided in OHAttributedLabel implementation

Answer 2

I tried this way:
draw with NSString drawAtPoint:withFont: or drawInRect:withFont:
set line joint and lin cap to round.
draw your text with the border color using drawing mode kCGTextStroke, be sure to set the line width a little wider,
then draw your text with its inner color using drawing mode kCGTextFill.
may be you need a little adjustment in the position to make it perfect.