How to get emoji path in iOS

Question

My purpose : Draw outline of every glyph

example1:

input: text= "666棒"

display:

Attach ：In the figure above, 1 is displayView,2 is inputView.

example2:

input : text= "666😁棒"

display :

Attach： In the figure above, 1 is displayView,2 is inputView,3 is nothing rendered.

Main ideas is :

1. Use CoreText obtained every CGglyph.
2. Get every glyph's CGPath
3. Use CAShapeLayer display the glyph on screen.

Main method:

    let letters     = CGMutablePath()
    let font        = CTFontCreateWithName(fontName as CFString?, fontSize, nil)
    let attrString  = NSAttributedString(string: text, attributes: [kCTFontAttributeName as String : font])
    let line        = CTLineCreateWithAttributedString(attrString)
    let runArray    = CTLineGetGlyphRuns(line)

    for runIndex in 0..<CFArrayGetCount(runArray) {

        let run     : CTRun =  unsafeBitCast(CFArrayGetValueAtIndex(runArray, runIndex), to: CTRun.self)
        let dictRef : CFDictionary = unsafeBitCast(CTRunGetAttributes(run), to: CFDictionary.self)
        let dict    : NSDictionary = dictRef as NSDictionary
        let runFont = dict[kCTFontAttributeName as String] as! CTFont

        for runGlyphIndex in 0..<CTRunGetGlyphCount(run) {
            let thisGlyphRange  = CFRangeMake(runGlyphIndex, 1)
            var glyph           = CGGlyph()
            var position        = CGPoint.zero
            CTRunGetGlyphs(run, thisGlyphRange, &glyph)
            CTRunGetPositions(run, thisGlyphRange, &position)

            let letter          = CTFontCreatePathForGlyph(runFont, glyph, nil)
            let t               = CGAffineTransform(translationX: position.x, y: position.y)
            if let letter = letter  {
                letters.addPath(letter, transform: t)
            }
        }
    }
    let path = UIBezierPath()
    path.move(to: CGPoint.zero)
    path.append(UIBezierPath(cgPath: letters))

    let pathLayer               = CAShapeLayer()
    pathLayer.path              = path.cgPath
    self.layer.addSubLayer(pathLayer)
   ...

Question:

How to get emoji path ,in this case I can draw the emoji outline instead of draw the whole emoji? Another benefit is I can draw emoji path animated if I need.

Any help is appreciate!

************************ update 2.15.2017 ***********************

Thanks @KrishnaCA 's suggest.

I used bool supports = CTFontGetGlyphWithName(myFont, "😀") find that no font is support emoji.

Fortunately is Google's Noto provide good support for emoji fonts

You can find it there : google's Noto

I used font Noto Emoji

Display:

Only Noto Emoji and Noto Color Emoji support Emoji (I guess)

Hope to help people who come here！

Answer 1

I believe you need to check whether a glyph for an unicode corresponding to the CTFont exist or not. If it doesn't exist, fall back to any default CTFont that has a glpyh for an unicode

You can check that using the following code.

bool supports = CTFontGetGlyphWithName(myFont, "😀")

here, myFont is a CTFontRef object.

Please let me know if this is what you're not looking for

Answer 2

我相信你需要CATextLayers来帮助你。

Answer 3

I know it's a bit late, but sadly you can not - emojis are actually bitmaps drawn into the same context as shapes representing regular characters. You best bet is probably to draw emoji characters separately at needed scale into the context. This won't give you access to the actual vector data.

If you really need it in a vector form:

• I'd go with finding Apple Emoji font redrawn in vector (I remember seeing it on the internet, not sure if it contains all the latest emojis though)
• Mapping names of the individual vector images you found to the characters and then drawing the vector images