1

I want to achieve a path like this in the picture using Path in SwiftUI, but my understanding of the Bezier curve is minimal, and I cannot reproduce the drawing on the image.

I am talking about the background drawing, which is hard to notice; it's like a mountain or staircase.

Any help will be appreciated!

Image to reproduce:

Image to reproduce

Here is my code:

struct BezierCurveView: Shape {

func path(in rect: CGRect) -> Path {
    
    var path = Path()
    
    path.move(to: CGPoint.zero)
    
    path.addCurve(to: CGPoint(x: rect.maxX / 3, y: rect.minY), control1: CGPoint(x: rect.minX + 40, y: rect.minY - 90), control2: CGPoint(x: rect.minX + 80, y: rect.minY - 90))
    
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
    
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    
    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
    
    return path
    
 }
}

Here is the result of my code:

The result of my code

Goundo
  • 95
  • 10
  • You'll need more point coordinates for each weekday than those you are using in your example, and perhaps you'd better use `addQuadCurve(to:controlPoint:)` to draw your path. – valeCocoa Nov 13 '21 at 13:34
  • @valeCocoa that won't be problem, but I'm still struggling with the control points, I want to manipulate the point from the start to the end, so that I can make the start & end smoother. that I can add more path coordinated with weekdays. – Goundo Nov 13 '21 at 18:39
  • To make the current path look smoother you'll have to make another curve going from the point where your first curve ends to the end of the rect: `path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))` this line should be another curve. – valeCocoa Nov 13 '21 at 19:11
  • Looks like you want something similar to the very first thing http://paperjs.org/ shows you when you open their site, so you may want to click the "source" link and see how they do it. (not in switft, but programming is programming, you just port the idea to your language+framework of choice) – Mike 'Pomax' Kamermans Nov 13 '21 at 19:27
  • Have a look at this. Looks similar to your question https://stackoverflow.com/questions/13719143/draw-graph-curves-with-uibezierpath/43813458#43813458 – SamB Nov 14 '21 at 06:38

0 Answers0