Get path to trace out a character in an iOS UIFont

Question

Suppose I have a custom font "Foo" that I'm using in my iOS App. I've added it to my project, plist, etc. and I'm able to render UILabels and such with it just fine.

Now, if I want to find out a sequence of points that would "trace out" the letter 'P' in that font, how would I get that sequence of points? For example, suppose I wanted to use a CGPath to draw the letter 'P' slowly like a plotter would ...

I just need a sequence of CGPoints in an array that if drawn as a path would draw a 'P'.

I realize that for some letters like 'T', this may not make sense, since the pen would have to be lifted to cross the 'T'. So maybe I need a sequence of CGPaths ...

Any hints on how to accomplish this?

Thanks!

Answer 1

Going from the letter "P" to a sequence of points involves several steps. You'll need to use Core Text.

1. Create a CTFont. Since iOS 7, you can use a UIFont where a CTFont is needed (they are “toll-free bridged”). You can also create a CTFont directly from a CGFont using the CTFontCreateWithGraphicsFont function, or by name using CTFontCreateWithName (or using a few other methods).

2. Get the glyphs for the letter using the CTFontGetGlyphsForCharacters function. For the letter "P" there should be just one glyph. For some characters in non-English scripts you may get multiple (combining) glyphs.

3. Use the CTFontCreatePathForGlyph function to get a CGPath for the glyph.

4. Use CGPathApply to enumerate the elements of the path.

5. Convert each line, quad curve, and cubic curve element of the path to a sequence of points. Apple doesn't provide any public API for doing this. You'll need to do it yourself. For straight line elements it's easy. For curve elements, you will need to do some research if you don't already know how to render a Bézier curve. For example, see convert bezier curve to polygonal chain?.

We can experiment with this easily in a Swift playground:

import UIKit
import CoreText
import XCPlayground

let font = UIFont(name: "HelveticaNeue", size: 64)!

var unichars = [UniChar]("P".utf16)
var glyphs = [CGGlyph].init(repeating: 0, count: unichars.count)
let gotGlyphs = CTFontGetGlyphsForCharacters(font, &unichars, &glyphs, unichars.count)
if gotGlyphs {
    let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)!
    let path = UIBezierPath(cgPath: cgpath)
    print(path)
    XCPlaygroundPage.currentPage.captureValue(value: path, withIdentifier: "glyph \(glyphs[0])")
}

Result:

<UIBezierPath: 0x7fbc89e0d370; <MoveTo {11.072000000000001, 23.808}>,
 <LineTo {11.072000000000001, 40.576000000000001}>,
 <LineTo {22.975999999999999, 40.576000000000001}>,
 <QuadCurveTo {30.560000000000002, 38.432000000000002} - {28.16, 40.576000000000001}>,
 <QuadCurveTo {32.960000000000001, 32.192} - {32.960000000000001, 36.288000000000004}>,
 <QuadCurveTo {30.560000000000002, 25.920000000000002} - {32.960000000000001, 28.096}>,
 <QuadCurveTo {22.975999999999999, 23.808} - {28.16, 23.744}>,
 <Close>,
 <MoveTo {4.992, 45.695999999999998}>,
 <LineTo {4.992, 0}>,
 <LineTo {11.072000000000001, 0}>,
 <LineTo {11.072000000000001, 18.687999999999999}>,
 <LineTo {25.024000000000001, 18.687999999999999}>,
 <QuadCurveTo {35.488, 22.208000000000002} - {31.936, 18.623999999999999}>,
 <QuadCurveTo {39.039999999999999, 32.192} - {39.039999999999999, 25.792000000000002}>,
 <QuadCurveTo {35.488, 42.143999999999998} - {39.039999999999999, 38.591999999999999}>,
 <QuadCurveTo {25.024000000000001, 45.695999999999998} - {31.936, 45.695999999999998}>,
 <Close>

Answer 2

rob's answer updated for swift 4 + vertical flipping for CoreGraphics uses an inverted coordinate system :

    var unichars = [UniChar]("P".utf16)
    var glyphs = [CGGlyph](repeating: 0, count: unichars.count)
    let gotGlyphs = CTFontGetGlyphsForCharacters(font, &unichars, &glyphs, unichars.count)
    if gotGlyphs {
        let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)!
        var inverse = CGAffineTransform(scaleX: 1, y: -1).translatedBy(x: 0, y: -cgpath.boundingBox.height - 1)
        let path = UIBezierPath(cgPath: cgpath.copy(using: &inverse)!)
        print(path)

Answer 3

For those who are looking the same solution in Objective C

    UIFont *font = [UIFont fontWithName:@"HelveticaNeue" size:64];
    CGFontRef fontref = CGFontCreateWithFontName((__bridge CFStringRef)font.fontName);
    NSString *unichars = @"I";
    CFStringRef yourFriendlyCFString = (__bridge CFStringRef)unichars;
    CGGlyph glyphs = CGFontGetGlyphWithGlyphName(fontref, yourFriendlyCFString);
    CTFontRef fontCT = CTFontCreateWithName((__bridge CFStringRef)font.fontName, font.pointSize, NULL);
    CGPathRef cgpath = CTFontCreatePathForGlyph(fontCT, glyphs, nil);
    UIBezierPath *path = [UIBezierPath bezierPathWithCGPath:cgpath];
    NSLog(@"Complete path For p is %@", path);
    CGPathApply(cgpath, (__bridge void * _Nullable)(bezierPoints), MyCGPathApplierFunc);
    NSLog(@"Points on path %@", bezierPoints);
    for(NSValue *point in bezierPoints){

       //Do your work
    }