I am making an attempt to create a round textual content path in SwiftUI utilizing a customized CircularTextPath view. The textual content is being drawn on an arc, and I need to add a background shade behind the trail, as proven in one other picture I’ve (for instance, including a stable background shade to all the textual content arc).
CircularTextPath:
import SwiftUI
struct CircularTextPath: View {
let textual content: String
let arcAngle: Angle
var physique: some View {
if arcAngle.radians != 0.0 {
textAsPath
.fixedSize()
.hidden()
.overlay {
GeometryReader { fullText in
let textWidth = fullText.measurement.width
let startAngle = -(arcAngle.radians / 2)
let radius = arcAngle.radians > 0 ? textWidth * 1.5 / arcAngle.radians : textWidth * 2.0 / arcAngle.radians
HStack(spacing: 0) {
ForEach(Array(textual content.enumerated()), id: .offset) { index, character in
Textual content(String(character))
.hidden()
.overlay {
GeometryReader { charSpace in
let midX = charSpace.body(in: .named("FullText")).midX
let fraction = midX / textWidth
let angle = startAngle + (fraction * arcAngle.radians)
let xOffset = (textWidth / 2) - midX
TextPath(character: String(character))
.scaleEffect(x: 1, y: 1) // Flip horizontally to right mirroring
.offset(y: -radius)
.rotationEffect(.radians(angle))
.offset(x: xOffset, y: radius)
}
}
}
}
.fixedSize()
.body(width: textWidth)
}
}
.coordinateSpace(title: "FullText")
} else {
textAsPath
}
}
non-public var textAsPath: some View {
HStack(spacing: 0) {
ForEach(Array(textual content.enumerated()), id: .offset) { index, character in
TextPath(character: String(character))
.scaleEffect(x: 1, y: 1) // Flip horizontally to right mirroring
}
}
}
}
struct TextPath: View {
let character: String
var physique: some View {
let path = characterToPath(character)
return path.fill(Coloration.main)
}
non-public func characterToPath(_ character: String) -> Path {
let font = UIFont.systemFont(ofSize: 20)
let attributedString = NSAttributedString(string: character, attributes: [.font: font])
let line = CTLineCreateWithAttributedString(attributedString)
let path = CGMutablePath()
for run in (CTLineGetGlyphRuns(line) as! [CTRun]) {
for index in 0..
What I need to obtain:
I need to add a background shade behind the trail, particularly behind all the round arc of textual content. How can I modify this code so as to add a stable background shade to the trail, much like the impact proven within the different picture I’ve?
What I’ve tried to this point:
- I’ve tried utilizing .background(Coloration) or .overlay(Coloration) so as to add a background to the – – – TextPath, however these don’t appear to attain the specified impact.
- I’ve additionally tried including a background shade to the trail itself, however that didn’t work out as a result of the trail is not a stable object, it is simply the define of the textual content.
what output I received
output I would like