11.6 C
New York
Wednesday, March 12, 2025

ios – How you can add a background shade to a path in SwiftUI, much like the one proven in one other picture?


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

enter image description here

output I would like

enter image description here

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles