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