How to draw text along circular path using SwiftUI

Question

I need some help on how to generate a single line text in a circular path using SwiftUI. I am trying to replicate the curved text in these Image. Is this possible in SwiftUI? Thanks.

Does this answer your question? [Draw text along circular path in Swift for iOS](https://stackoverflow.com/questions/32771864/draw-text-along-circular-path-in-swift-for-ios) — gotnull, Feb 13 '20 at 05:43
There's no easy built-in way. Tobias Due Munk talks about putting text along a circle starting around 9m20s in [this talk](https://www.youtube.com/watch?v=1BHHybRnHFE). His code [may be available soon](https://twitter.com/tobiasdm/status/1227762331742015488). Rob Napier's [CurvyText](https://github.com/rnapier/CurvyText) project might also be helpful. — rob mayoff, Feb 13 '20 at 05:44

score 15 · Accepted Answer · edited Jul 17 '22 at 15:43

15

Found a solution to my question. Credits to Tobias Due Munk for posting his prototype for CurvedText using SwiftUI. His solution can be found here https://github.com/duemunk/CrookedText

Example usage:

CrookedText(text: "Hello, world!", radius: 10)

edited Jul 17 '22 at 15:43

lewis

2,936
2
37
72

answered Feb 26 '20 at 23:39

Mark Bryan Ramirez

241
2
8

1

https://git.kabellmunk.dk/prototyping-custom-ui-in-swiftui-talk/custom-ui-prototype-in-swiftui/-/blob/master/Custom%20UI%20Prototype/Prototype/CurvedText.swift – Antony Stubbs Jul 14 '20 at 11:47
I believe Tobias moved the code here: https://github.com/duemunk/CrookedText – lmunck Dec 22 '21 at 18:26

score 1 · Answer 2 · answered Feb 13 '20 at 05:50

1

No, Swift UI doesn't provide any way to do that as of now. So as @fulvio pointed out you must do it Swift UIKit way .

You can later use UIViewRepresentable to integrate it in your SwiftUI Project Refer Swift UI interfacing with UIKit by Apple Inc.

answered Feb 13 '20 at 05:50

Tilak Madichetti

4,110
5
34
52

I tried doing it as UIViewRepresentable but UIGraphicsGetImageFromCurrentImageContext() doesnt seem to be supported in SwiftUI. – Mark Bryan Ramirez Feb 14 '20 at 02:31
Then I guess you can't but there isn't any Swift ui way for sure. – Tilak Madichetti Feb 14 '20 at 09:08

score 1 · Answer 3 · edited Feb 27 '20 at 10:49

calculate position of each character, see How to get position of each character in SwiftUI Text and related answers and discussions, to know the limitations
calculate required position and rotation of each character on the path you would like to follow (for circle it is very easy to be done) with help of step 1 (use the distance along the path as a parameter)
position and rotate each character as here Positioning View using anchor point

I know that answers with links, as already mentioned by "Ru Chem Chong", is not the best, but answer your question is really complex task and explanation needs more than space available here.

How to draw text along circular path using SwiftUI

3 Answers3