SwiftUI Tutorial: Advanced Shape Design - Part 3: Bézier Curves

SwiftUI Tutorial: Advanced Shape Design - Part 3: Bézier Curves

In this episode we look at how layout guides in combination with extensions in PureSwiftUI makes the process of creating complex shapes with Bézier curves a simple and enjoyable one and without the need to calculate a single point.

This is the third episode in a series on creating complex paths using layout guides, a feature of PureSwiftUI that will unleash your creativity and allow you to focus on what you want to create, rather than how to create it.

In this series we're taking a look at how to create complex paths using layout guides, a feature of PureSwiftUI that will unleash your creativity and allow you to focus on what you want to create, rather than how to create it.

There are many aspects to layout guides, and in this episode we're going to be focusing on polar layouts, allowing you to create paths with circular components without the need for trigonometry. You can use layout guides in extremely powerful ways with this one feature but it goes a lot deeper. In future episodes we will be exploring all this framework has to offer.

You'll wonder how you ever created paths without it! ;o)

Heart image:

Bézier Curves videos with some mathematics:

================

PureSwiftUI is a free Swift Package that includes a multitude of useful extensions and properties to make your life easier with SwiftUI resulting in cleaner code that takes less time to write.

It's a huge time-saver so I do encourage you to check it out.

You can get PureSwiftUI here:

Check out PureSwiftUITools for additional SwiftUI utility type things:

If you want to ask me a question or follow me for updates, you can do so on Twitter:

[jayjackson]

Usually, I am not writing any comments on YouTube. But I feel bad for you only having 2, 000 subscribers while producing such great content.

I have been looking for tutorials on drawing shapes in SwiftUI for many hours before finding your video. In my opinion, Bezier Curves are the most important tool in SwiftUI when it comes to drawing any shape I could think of. Your video is the best explanation on this topic and the only one I'll have to watch.

I appreciate the time you took and wanted to let you know that it wasn't wasted. You created a great resource that will hopefully benefit many more people in the future and not only those who watched it so far.

Have a great day!

[robertshatto]

Your delivery is delightful and your content is impressive. I'm a 63 year old who is just getting back into programming and I enjoy watching these videos. I learned programming in Commodore Vic 20 Basic and Macintosh Plus Aztec C and now I thought i'd try my hand with Swift and your SwiftUI videos are great. The amount of work you put in to these must be insane but the results are intelligent and valuable.
Keep up the good work.

[squarefrog]

That Bézier curve live diagram was phenomenal!

[michasukiewicz]

The video is over 4-year old now, but I've just came across it recently. The library is great. I hope you still developing it, so I can use it in commercial app.

[ramunas_]

Your teaching/explaining path is amazing! Thank you!

[Kevalkorat]

This is amazing video. Please keep up this work. You made it look so simple and I love that.

[MarkBTomlinson]

This was really well done, loved the interlude, my only thought was wouldn't it me great if the line reflected on your glasses. I know but hey it would have been the icing on the cake. Great stuff Adam thanks!

[Денис-жфр]

man, you must have millions of subscribers.

[frydiggity]

I've not yet had any needs yet to really work with curves in Paths yet in SwiftUI, but now I want to find some excuses to! Just want to say I just LOVE what you're doing here and especially how you're delivering it.

[beirtipol]

Finally someone that explains bezier curves simply! And with lasers!

Feature request: could you add a debug feature to the grid that shows the coordinate of the point on screen? Saves my counting them out by hand because I'm lazy:)

[chapparfellow]

Wow! Thanks for amazing presentation. Love it.

[Xstyle-k]

Good job) PureSwiftUI it is a brilliant in the iOS developer hands)Thank you.

[llllpavle]

Hi, thanks for the excellent tutorials! Also, I have a question. If I have a point in the middle of a cellб what is the best option to drawing it there? Should I make more cells to move point to where cells intersect?

[Nick-gjgz]

What are those Xcode code operation shortcuts, I really want to learn that! Like 2:38, 7:05, 09:45

[SentimentalMo]

Is there completed working source? I type in the first part drawing four straight lines, but doesn't work, see no shape.

Xcode Version 15.1 beta (15C5028h), iOS 17. What's wrong?

n

```
import SwiftUI
import PureSwiftUI


private let heartColor = Color(red: 225 / 255, green: 40 / 255, blue: 48 / 255)
private let heartLayoutConfig = 8, rows: 10)

private typealias Curve = (p: CGPoint, cp1: CGPoint, cp2: CGPoint)

private struct Heart: Shape {
// this works
// func path(in rect: CGRect) -> Path {
// var path = Path()
//
// path.addEllipse(in: rect)
//
// return path
// }


// but this, doesn't show a triangle
func path(in rect: CGRect) -> Path {
var path = Path()

let g = heartLayoutConfig.layout(in: rect)

let p1 = g[0, 3]
let p2 = g[4, 2]
let p3 = g[8, 3]
let p4 = g[4, 10]

var curves = [Curve]()

// c1
curves.append(Curve(p2, p1, p2))

// c2
curves.append(Curve(p3, p2, p3))

// c3
curves.append(Curve(p4, p3, p4))

// c4
curves.append(Curve(p1, p4, p1))

for curve in curves {
path.curve(curve.p, cp1: curve.cp1, cp2: curve.cp2, showControlPoints: true)
}

return path
}
}

struct HeartShapeDemo_Harness: View {
var body: some View {
VStack(spacing: 50) {
Heart()
.fill(heartColor)
.stroke(.green, lineWidth: 3)
.frame(200)
ZStack {
Image(.heart)
.resizedToFit(200)
Heart()
.stroke(.black, lineWidth: 2)

.frame(200)
}
}
}
}


#Preview(traits: .sizeThatFitsLayout) {
HeartShapeDemo_Harness()
.showLayoutGuides(true)
}
```

[abdullabardiyev]

how to draw heart without PureSwiftUI library