0.3 C
New York
Sunday, February 23, 2025

ios – How can I clean a freehand drawn path in SwiftUI in actual time?


I am constructing a SwiftUI view the place customers can draw a line by dragging on a ZStack. At present, I am capturing the drag factors in an array and drawing straight line segments between them. Nonetheless, the ensuing path seems to be jagged and never as clean as I would like. I need the drawn path to be smoothed (just like the hooked up picture) because the consumer is dragging, in order that the imperfections within the uncooked factors are refined right into a extra pure, curved line.

present implementation:

import SwiftUI

struct GlowingLine: View {
    @Surroundings(.presentationMode) var presentationMode
    @State personal var dragPath: [CGPoint] = []
    @State var isCreated: Bool = false

    var physique: some View {
        GeometryReader { geometry in
            ZStack {
                // Background picture (if wanted)
                Picture("")
                    .resizable()
                    .scaledToFit()
                
                // Draw the drag path
                Path { path in
                    for (index, level) in dragPath.enumerated() {
                        if index == 0 {
                            path.transfer(to: level)
                        } else {
                            path.addLine(to: level)
                        }
                    }
                }
                .stroke(Colour.purple, type: StrokeStyle(lineWidth: 5, lineCap: .spherical, lineJoin: .spherical))
                .shadow(colour: .purple, radius: 10, x: 0, y: 0)
                
                // UI Controls (simplified)
                VStack {
                    Button("Clear") {
                        dragPath.removeAll()
                        isCreated = false
                    }
                }
            }
            .background(Colour.grey)
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { worth in
                        if !isCreated {
                            dragPath.append(worth.location)
                        }
                    }
                    .onEnded { _ in
                        isCreated = true
                    }
            )
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct GlowingLine_Previews: PreviewProvider {
    static var previews: some View {
        GlowingLine()
    }
}

My query:

  • How can I convert this freehand drag path right into a clean curve in actual time?
  • Are there any beneficial methods (e.g., utilizing Bezier curves, Catmull-Rom splines, or different interpolation strategies) or libraries that work properly with SwiftUI to realize this?

present code outcome

enter image description here

what i need in outcome

enter image description here

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles