Draw shapes with Core Graphics iOS Tutorial

Core Graphics is an API included in both Cocoa and Cocoa Touch. It allows you to draw graphic objects on the graphic destination. In this tutorial we will draw some basic shapes such as a rectangle or a circle. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSDrawShapesTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard and drag three Buttons from the Object Library to the top section of the main View. Align them horizontally and give them a title of "Lines, Rectangle, Circle". Drag a The Storyboard should look like this.

Select the image view and go to the Size Inspector. Enter the following values in the View section.

Select the "Resolve Auto Layout Issues" button on the bottom-right of the Interface Builder and choose "Add Missing Constraints"

Select each button and go to the Attributes Inspector. In the View section give the button from left to right a Tag value of 0,1 and 2. The tag field is needed later to determine which button is pressed.

Open The Assistant Editor and make sure the ViewController.swift file is visible. Ctrl And Drag from the "Lines" button to the ViewController class and create the following Action. make sure to change the Type from Any to UIButton.

Select the other buttons and Ctrl-drag to the IBAction method inside the ViewController class. Pressing each button will execute the IBAction method. The tag property of each button is used to choose the right method to draw the corresponding object.

@IBAction func buttonPressed(_ sender: UIButton) {
    switch sender.tag {
        case 0: drawLines()
        case 1: drawRectangle()
        case 2: drawCircle()
        default: print("default")
    }
}

The UIGraphicsImageRenderer class was introduced in iOS 10 as a modern class which allows closures. It also support the wide color gamut of devices like the iPad Pro. Implement the drawing methods

func drawLines() {
    // 1
    let renderer = UIGraphicsImageRenderer(size: CGSize(width: 280, height: 250))

    let img = renderer.image { ctx in
        // 2
        ctx.cgContext.move(to: CGPoint(x: 20.0, y: 20.0))
        ctx.cgContext.addLine(to: CGPoint(x: 260.0, y: 230.0))
        ctx.cgContext.addLine(to: CGPoint(x: 100.0, y: 200.0))
        ctx.cgContext.addLine(to: CGPoint(x: 20.0, y: 20.0))

        ctx.cgContext.setLineWidth(10)
        ctx.cgContext.setStrokeColor(UIColor.black.cgColor)

        // 3
        ctx.cgContext.strokePath()
    }

    imageView.image = img
}
    
func drawRectangle() {
    let renderer = UIGraphicsImageRenderer(size: CGSize(width: 280, height: 250))

    let img = renderer.image { ctx in
        let rectangle = CGRect(x: 0, y: 0, width: 280, height: 250)

        // 4
        ctx.cgContext.setFillColor(UIColor.yellow.cgColor)
        ctx.cgContext.setStrokeColor(UIColor.gray.cgColor)
        ctx.cgContext.setLineWidth(20)

        // 5
        ctx.cgContext.addRect(rectangle)
        ctx.cgContext.drawPath(using: .fillStroke)
    }

    imageView.image = img
}
    
func drawCircle() {
    let renderer = UIGraphicsImageRenderer(size: CGSize(width: 280, height: 250))

    let img = renderer.image { ctx in
        let rect = CGRect(x: 5, y: 5, width: 270, height: 240)

        // 6
        ctx.cgContext.setFillColor(UIColor.blue.cgColor)
        ctx.cgContext.setStrokeColor(UIColor.black.cgColor)
        ctx.cgContext.setLineWidth(10)

        ctx.cgContext.addEllipse(in: rect)
        ctx.cgContext.drawPath(using: .fillStroke)
    }

    imageView.image = img
}
  1. Create an image renderer that will draw images 

  2. Draw some lines and set the line width to 10 and the line color to black..

  3. The context’s graphics state are used to paint the path.

  4. A yellow fill color and a grey stroke color with a width of 20 are defined.

  5. The path including the rectangle is drawn.

  6. The path including the ellipse is drawn.

 Build and Run and click on each button to draw the different shapes.

You can download the source code of the IOSDrawShapesTutorial at the ioscreator repository on Github.