ios – Swift: Changing Textual content to CGPath – Round Glyphs Not Rendering Correctly

ios – Swift: Changing Textual content to CGPath – Round Glyphs Not Rendering Correctly


I’m making an attempt to transform a String right into a CGPath in Swift utilizing CoreText. The method works for many characters, however for letters with round edges like ‘O’, ‘P’, ‘E’, the trail doesn’t render accurately. The curved elements seem distorted or lacking.

Under is my perform that converts textual content to a path:

import CoreText
import UIKit

func textToPath(textual content: String, font: UIFont) -> CGPath? {
    let attributedString = NSAttributedString(string: textual content, attributes: [.font: font])
    let line = CTLineCreateWithAttributedString(attributedString)
    let runArray = CTLineGetGlyphRuns(line) as NSArray
    
    let path = CGMutablePath()
    
    for run in runArray {
        let run = run as! CTRun
        let depend = CTRunGetGlyphCount(run)
        
        for index in 0..<depend {
            let vary = CFRangeMake(index, 1)
            var glyph: CGGlyph = 0
            var place: CGPoint = .zero
            CTRunGetGlyphs(run, vary, &glyph)
            CTRunGetPositions(run, vary, &place)
            
            if let glyphPath = CTFontCreatePathForGlyph(font, glyph, nil) {
                // Apply transformation to regulate place and invert the Y-axis
                var remodel = CGAffineTransform(translationX: place.x, y: place.y)
                remodel = remodel.scaledBy(x: 1, y: -1) // Invert Y-axis to match SVG coordinate system
                
                // Add the glyph path to the principle path
                path.addPath(glyphPath, remodel: remodel)
            }
        }
    }
    
    return path
}

I’m making use of a metamorphosis to invert the Y-axis in order that the trail aligns with the coordinate system, however the concern persists. Under is a picture displaying the wrong rendering of ‘O’, ‘P’, and ‘E’:

📷 Connect the picture displaying incorrect rendering

What I’ve Tried:
Eradicating the .scaledBy(x: 1, y: -1) transformation (causes flipped textual content).
Checking if CTFontCreatePathForGlyph is returning nil (it does return a path).
Utilizing totally different fonts to verify if it is a font-specific concern.

Anticipated Habits:
The generated path ought to match the textual content exactly, together with clean curves for letters like ‘O’, ‘P’, and ‘E’.

Query:
What might be inflicting the wrong rendering of round glyphs?
Is there a difficulty with the transformation or how CTFontCreatePathForGlyph generates paths?
How can I be sure that the trail accurately represents the textual content, together with round edges?

author avatar
roosho Senior Engineer (Technical Services)
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog. 
rooshohttps://www.roosho.com
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog. 

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here


Latest Articles

author avatar
roosho Senior Engineer (Technical Services)
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog.