How to draw bordered letter?

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.

score 1 · Accepted Answer · edited May 23 '17 at 11:51

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

score 0 · Answer 2 · answered Sep 02 '11 at 08:34

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.

How to draw bordered letter?

2 Answers2