Custom shapes and paths in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple rectangle path using UIBezierPath.

iOS Swift

let rect = CGRect(x: 10, y: 10, width: 100, height: 50)
let path = UIBezierPath([1]: rect)

Drag options to blanks, or click blank then click option'

AovalIn

Bmove

Crect

DarcCenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ovalIn' instead of 'rect' creates an ellipse, not a rectangle.

Using 'arcCenter' requires different parameters and is not for rectangles.

The UIBezierPath(rect:) initializer creates a rectangular path.

2fill in blank

medium

Complete the code to add a line from the current point to (100, 100) in the path.

iOS Swift

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.[1](to: CGPoint(x: 100, y: 100))

Drag options to blanks, or click blank then click option'

AaddArc

BaddLine

CaddCurve

DaddQuadCurve

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'addArc' or 'addCurve' adds curves, not straight lines.

Forgetting to move the starting point before adding a line.

The addLine(to:) method adds a straight line to the specified point.

3fill in blank

hard

Fix the error in the code to close the path properly.

iOS Swift

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 50, y: 0))
path.addLine(to: CGPoint(x: 50, y: 50))
path.[1]()

Drag options to blanks, or click blank then click option'

AclosePath

Bstroke

Cfill

Dmove

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'stroke()' or 'fill()' does not close the path.

Using 'move()' changes the current point without closing.

The closePath() method closes the current subpath by connecting the last point to the first.

4fill in blank

hard

Fill both blanks to create a rounded rectangle path with corner radius 10.

iOS Swift

let rect = CGRect(x: 20, y: 20, width: 150, height: 100)
let path = UIBezierPath([1]: rect, cornerRadius: [2])

Drag options to blanks, or click blank then click option'

AroundedRect

Brect

C10

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rect' instead of 'roundedRect' does not create rounded corners.

Using a corner radius too small or zero results in sharp corners.

The UIBezierPath(roundedRect:cornerRadius:) initializer creates a rectangle with rounded corners.

5fill in blank

hard

Fill all three blanks to create a quadratic curve from (0,0) to (100,100) with control point (50,0).

iOS Swift

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.[1](to: CGPoint(x: 100, y: 100), controlPoint: CGPoint(x: [2], y: [3]))

Drag options to blanks, or click blank then click option'

AaddQuadCurve(to:)

B50

C0

DaddCurve(to:)

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'addCurve(to:)' requires two control points, not one.

Swapping control point coordinates causes unexpected curve shapes.

The addQuadCurve(to:controlPoint:) method adds a quadratic Bézier curve with one control point.