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
what i need in outcome