Custom shapes and paths in iOS Swift - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Path in SwiftUI?

A Path is a shape made by connecting lines and curves. It defines the outline of a custom shape you can draw on the screen.

beginner

How do you start drawing a custom shape in SwiftUI?

You create a struct that conforms to the Shape protocol and implement the path(in rect: CGRect) -> Path method to define your shape.

beginner

What does the move(to:) method do in a Path?

It moves the drawing cursor to a new point without drawing a line, like lifting a pen and placing it somewhere else on paper.

beginner

How do you add a straight line to a Path?

Use the addLine(to:) method to draw a straight line from the current point to a new point.

beginner

Why use custom shapes instead of built-in shapes?

Custom shapes let you create unique designs and visuals that built-in shapes like circles or rectangles can't provide.

Which protocol must a struct conform to for creating a custom shape in SwiftUI?

A Shape

B View

C Path

D Drawable

To create a custom shape, your struct must conform to the Shape protocol.

What does the path(in rect: CGRect) method return?

A A Shape

B A View

C A CGRect

D A Path

The method returns a Path that defines the outline of the shape.

Which method moves the drawing cursor without drawing a line?

A addLine(to:)

B move(to:)

C addCurve(to:)

D closeSubpath()

move(to:) moves the cursor without drawing, like lifting a pen.

How do you close a path to connect the last point to the first?

A closeSubpath()

B endPath()

C closePath()

D finishPath()

closeSubpath() closes the current path by connecting the last point to the first.

Which of these is NOT a method to add to a Path?

A addLine(to:)

B addArc(center:radius:startAngle:endAngle:clockwise:)

C addText(string:)

D addQuadCurve(to:control:)

There is no addText(string:) method for Path; text is handled differently.

Explain how to create a simple custom triangle shape in SwiftUI using Path.

Think about moving to the first point, drawing lines to the other points, and closing the shape.

Describe the difference between move(to:) and addLine(to:) when drawing a path.

Imagine drawing with a pen on paper.

Practice

1. What is the main purpose of the path(in: CGRect) method in a SwiftUI Shape?

easy

A. To animate the shape's size changes.

B. To set the background color of the shape.

C. To handle user tap gestures on the shape.

D. To define the outline of the custom shape by drawing paths.

Solution

1. Step 1: Understand the role of path(in: CGRect)

   This method is required by the Shape protocol to define the shape's outline.

2. Step 2: Recognize what the method returns

   It returns a Path that describes the shape's drawing instructions inside the given rectangle.

3. Final Answer:

   To define the outline of the custom shape by drawing paths. -> Option D

4. Quick Check:

   path(in: CGRect) defines shape outline [OK]

Hint: Remember: path(in:) draws the shape outline [OK]

Common Mistakes:

• Confusing path method with color or animation methods
• Thinking it handles user interaction
• Assuming it sets layout constraints

2. Which of the following is the correct way to start drawing a path at a specific point in SwiftUI?

easy

A. path.begin(at: CGPoint(x: 50, y: 50))

B. path.move(to: CGPoint(x: 50, y: 50))

C. path.start(at: CGPoint(x: 50, y: 50))

D. path.setStartPoint(CGPoint(x: 50, y: 50))

Solution

1. Step 1: Recall the correct method to move the path cursor

   The Path type uses move(to:) to set the starting point.

2. Step 2: Verify method names

   Only move(to:) is a valid method; others do not exist in SwiftUI's Path.

3. Final Answer:

   path.move(to: CGPoint(x: 50, y: 50)) -> Option B

4. Quick Check:

   Use move(to:) to start path [OK]

Hint: Use move(to:) to set path start point [OK]

Common Mistakes:

• Using non-existent methods like start or begin
• Confusing with other graphics frameworks
• Forgetting to use CGPoint for coordinates

3. Given the following SwiftUI shape code, what shape will be drawn?

struct Triangle: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: rect.midX, y: rect.minY))
    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.closeSubpath()
    return path
  }
}

medium

A. A triangle pointing upwards

B. A rectangle

C. A circle

D. A triangle pointing downwards

Solution

1. Step 1: Analyze the points used in the path

   The path starts at the top center (midX, minY), then draws lines to bottom left and bottom right corners.

2. Step 2: Understand the shape formed

   Connecting these points and closing the path forms a triangle pointing upwards.

3. Final Answer:

   A triangle pointing upwards -> Option A

4. Quick Check:

   Points form upward triangle [OK]

Hint: Visualize points: top center then bottom corners [OK]

Common Mistakes:

• Mixing up coordinate system orientation
• Assuming shape is a rectangle or circle
• Ignoring the order of points

4. Identify the error in this SwiftUI custom shape code:

struct LineShape: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: rect.width, y: 0))
    return path
  }
}

medium

A. No error; the code correctly draws a horizontal line.

B. The path does not close the subpath, causing a runtime error.

C. The starting point CGPoint(x: 0, y: 0) is outside the given rect.

D. Using rect.width instead of rect.maxX causes incorrect drawing.

Solution

1. Step 1: Check the path commands

   The path moves to (0,0) and draws a line to (rect.width, 0), which is valid inside the rect.

2. Step 2: Verify if closing the path is necessary

   Closing a path is optional; lines can be open shapes without errors.

3. Final Answer:

   No error; the code correctly draws a horizontal line. -> Option A

4. Quick Check:

   Open paths are valid; no error here [OK]

Hint: Open paths don't require closing to be valid [OK]

Common Mistakes:

• Assuming closeSubpath() is mandatory
• Confusing rect.width with rect.maxX (both valid here)
• Thinking (0,0) is outside rect bounds

5. You want to create a custom SwiftUI shape that draws a star with 5 points. Which approach correctly combines path methods to achieve this?

hard

A. Use addRect() five times to create star arms.

B. Use addEllipse(in:) repeatedly to draw circles at star points.

C. Use move(to:) to start at one point, then use addLine(to:) to connect all star points in order, finally call closeSubpath().

D. Use move(to:) once and then addQuadCurve(to:control:) to draw smooth star edges without lines.

Solution

1. Step 1: Understand star shape construction

   A star is made by connecting points with straight lines in a specific order.

2. Step 2: Identify correct path methods

   Starting with move(to:), then connecting points with addLine(to:), and closing the path with closeSubpath() correctly draws the star.

3. Step 3: Evaluate other options

   Using ellipses or rectangles won't form a star shape; quad curves create smooth curves, not sharp star points.

4. Final Answer:

   Use move(to:) to start at one point, then use addLine(to:) to connect all star points in order, finally call closeSubpath(). -> Option C

5. Quick Check:

   Star = move + addLine + closeSubpath [OK]

Hint: Connect star points with lines, then close path [OK]

Common Mistakes:

• Trying to use curves instead of lines for star points
• Using shapes like ellipses or rectangles incorrectly
• Forgetting to close the path to complete the shape