Drawing in SwiftUI { }
1 Learn And Code
With Enid
How to Draw in SwiftUI
(0, 0) 100 200 300 400 x
Pa
th 100
200
.move() 300
400
.addLine() y
Drawing in SwiftUI { }
2 Learn And Code
With Enid
Let’s say our diamond will have
a frame with a size of 400x400.
import SwiftUI
{}
struct ContentView: View {
var body: some View {
Path { path in
400
}
.frame(width: 400, height: 400)
400
Drawing in SwiftUI { }
3 Learn And Code
With Enid
First, it’s helpful to visualize
the iOS coordinate system.
(0, 0) 400 x
import SwiftUI
{}
struct ContentView: View {
var body: some View {
Path { path in
.frame(width: 400, height: 400)
400
y
Drawing in SwiftUI { }
4 Learn And Code
With Enid
I’ll be drawing purple lines with a width
of 4 points.
(0, 0) 400 x
import SwiftUI
{}
struct ContentView: View {
var body: some View {
Path { path in
.stroke(.purple, style: .init(lineWidth: 4))
.frame(width: 400, height: 400)
400
y
Drawing in SwiftUI { }
5 Learn And Code
With Enid
We specify the starting point for drawing
the first line using the move() method.
(0, 0) 100 200 300 400 x
import SwiftUI
{}
100
struct ContentView: View {
var body: some View {
Path { path in
path.move(to: CGPoint(x: 100, y: 0))
200
}
.stroke(.purple, style: .init(lineWidth: 4))
.frame(width: 400, height: 400)
300
}
400
y
Drawing in SwiftUI { }
6 Learn And Code
With Enid
At this point, we can draw new lines by using
the addLine() method and specify the
end point of each line.
(0, 0) 100 200 300 400 x
import SwiftUI
{}
100
struct ContentView: View {
var body: some View {
200
Path { path in
path.move(to: CGPoint(x: 100, y: 0))
path.addLine(to: CGPoint(x: 300, y: 0))
300
}
.stroke(.purple, style: .init(lineWidth: 4))
.frame(width: 400, height: 400)
}
400
}
y
Drawing in SwiftUI { }
7 Learn And Code
With Enid
We continue drawing new lines using
the same method.
(0, 0) 100 200 300 400 x
import SwiftUI
{}
100
struct ContentView: View {
var body: some View {
Path { path in
path.move(to: CGPoint(x: 100, y: 0))
200
path.addLine(to: CGPoint(x: 300, y: 0))
path.addLine(to: CGPoint(x: 400, y: 100))
}
300
.stroke(.purple, style: .init(lineWidth: 4))
.frame(width: 400, height: 400)
400
}
y
Drawing in SwiftUI { }
8 Learn And Code
With Enid
import SwiftUI
{}
struct ContentView: View {
var body: some View {
Path { path in
path.move(to: CGPoint(x: 100, y: 0))
path.addLine(to: CGPoint(x: 300, y: 0))
(0, 0) 100 200 300 400 x
path.addLine(to: CGPoint(x: 400, y: 100))
path.addLine(to: CGPoint(x: 200, y: 400))
.stroke(.purple, style: .init(lineWidth: 4))
.frame(width: 400, height: 400)
100
}
200
300
400
y
Drawing in SwiftUI { }
9 Learn And Code
With Enid
import SwiftUI
{}
struct ContentView: View {
var body: some View {
Path { path in
path.move(to: CGPoint(x: 100, y: 0))
path.addLine(to: CGPoint(x: 300, y: 0))
(0, 0) 100 200 300 400 x
path.addLine(to: CGPoint(x: 400, y: 100))
path.addLine(to: CGPoint(x: 200, y: 400))
path.addLine(to: CGPoint(x: 0, y: 100))
.stroke(.purple, style: .init(lineWidth: 4))
100
.frame(width: 400, height: 400)
}
200
300
400
y
Drawing in SwiftUI { }
10 Learn And Code
With Enid
Lastly, we can call the closeSubpath()
method to close the path.
import SwiftUI
struct ContentView: View {
{}
var body: some View {
Path { path in
path.move(to: CGPoint(x: 100, y: 0))
path.addLine(to: CGPoint(x: 300, y: 0))
path.addLine(to: CGPoint(x: 400, y: 100))
path.addLine(to: CGPoint(x: 200, y: 400))
path.addLine(to: CGPoint(x: 0, y: 100))
path.closeSubpath()
.stroke(.purple, style: .init(lineWidth: 4))
.frame(width: 400, height: 400)
}
Drawing in SwiftUI { }
11 Learn And Code
With Enid
import SwiftUI
{}
struct ContentView: View {
var body: some View {
Path { path in
path.move(to: CGPoint(x: 100, y: 0))
path.addLine(to: CGPoint(x: 300, y: 0))
path.addLine(to: CGPoint(x: 400, y: 100))
path.addLine(to: CGPoint(x: 200, y: 400))
path.addLine(to: CGPoint(x: 0, y: 100))
path.closeSubpath()
.stroke(.purple, style: .init(lineWidth: 4))
.fill(
LinearGradient(
colors: [.white, .purple],
startPoint: .topTrailing,
endPoint: .bottomLeading
.frame(width: 400, height: 400)
We can fill the path with a linear
gradient color using the fill() modifier.
Drawing in SwiftUI { }
12 Learn And Code
With Enid
You can also create shapes using the Shape protocol, but in this tutorial,
we have relied solely on Path.
p e
a
Sh
m
ax
X
m
id
Y h()
p a t
t
Rec
C G
i nX i nY
m m
