Hello guys,

I started project 9 and I don't understand well the process of drawing. I tried to draw an arrow but the result is not what I expected.

import SwiftUI

struct Arrow: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: CGPoint(x: rect.height, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.width / 3, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.width / 3))
        path.move(to: CGPoint(x: rect.height, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.width / 2))

        return path
    }
}

struct ArrowView: View {
    var body: some View {
        Arrow()
            .frame(width: 300, height: 300)

    }
}

struct ArrowView_Previews: PreviewProvider {
    static var previews: some View {
        ArrowView()
    }
}

Can somebody explain me how to draw simple shapes?

Thank you

@andrea is trying to connect the dots.....

I tried to draw an arrow but the result is not what I expected.

What if drawing an arrow was as simple as connecting the dots?
Here's a great tutorial where the result is, coincidently, a nice arrow! ⬅️➡️

See -> Connect the Dots

Shoutout to CodeSlicing!
Excellent series on drawing in SwiftUI.

So, these are the points that you are using:

• x: rect.height, y: rect.midY
• x: rect.width / 3, y: rect.minY
• x: rect.minX, y: rect.width / 3
• x: rect.height, y: rect.midY
• x: rect.maxX, y: rect.width / 2

Let's assume that your rectangle that you are drawing in has a width and hieght of 10 just for easy math and point plotting.

However, in this graph the (0, 0) point is not at the bottom left corner of the grid like you might be used to from math class. Instead, the (0,0) point is at the top-left corner, and the Y values get larger as they move down the screen. That is just the way that Core Graphics plots things, so it might be sort of upside down from what you are used to.

Then we have these points: (x: rect.height, y: rect.midY) = (10, 5)

• We are starting on the far right edge of the square, and half way down toward the bottom of the square.

(x: rect.width / 3, y: rect.minY) = (3.33, 0)

• We move to only 1/3 of the way off the left edge at the top of the square.

(x: rect.minX, y: rect.width / 3) = (0, 3.33)

• We move to the left edge of the square, but 1/3 of the way down from the top.

(x: rect.height, y: rect.midY) = (10, 5)

• We move back to where we started

This is shaping up to be more like just a triangle than an arrow. So, think about if you were trying to draw an arrow by plotting points on a graph. But, remember that the Y values on the graph might be inverted from what you are used to.

As Fly0strich has already said, the origin (x: 0, y:0) is top left. You have been mixing you heights and widths and mins and maxs.

You could try this

path.move(to: CGPoint(x: 0, y: rect.height * 0.3))
path.addLine(to: CGPoint(x: 0, y: rect.height * 0.7))
path.addLine(to: CGPoint(x: rect.width * 0.6, y: rect.height * 0.6))
path.addLine(to: CGPoint(x: rect.width * 0.6, y: rect.height * 0.8))
path.addLine(to: CGPoint(x: rect.width, y: rect.height / 2))
path.addLine(to: CGPoint(x: rect.width * 0.6, y: rect.height * 0.2 ))
path.addLine(to: CGPoint(x: rect.width * 0.6, y: rect.height * 0.4 ))

There is no need to add this line at the end, because the path will automatically be closed connecting to the first point.

path.addlLine(to: CGPoint(x: 0, y: rect.height * 0.3))

Maybe this will also help, as it has a diagram of the coordinate system. Notice it talks about the leading edge, and that in a left-to-right system it is as the diagram, whilst in right-to-left systems the x coordinates are flipped horizontally so that (0,0) is top right.