Basic Shapes

Episode #281 | 7 minutes | published on July 7, 2017 | Uses swift-3.0, Xcode-8.3

Subscribers Only

core graphics

Learn how to create basic shapes using Core Graphics. We’ll start by creating a playground that we can use to quickly see the results of our work.

This episode is part of a series: Dive Into Core Graphics.

1. Intro 2 min

2. Basic Shapes 7 min

3. Paths 17 min

4. Colors 9 min

5. Gradients 11 min

6. Clipping Paths 6 min

7. Context Transforms 10 min

8. Images 7 min

9. Text 9 min

10. Offscreen Rendering 12 min

11. Custom CALayer 13 min

12. Pie Progress View 7 min

13. Watermarking Photos 6 min

14. Working in AppKit 8 min

Basic Playground Setup

import UIKit
import PlaygroundSupport

final class CustomView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError()
    }

}

let view = CustomView(frame: CGRect(x: 0, y: 0, width: 320, height: 320))

PlaygroundPage.current.liveView = view

Getting the context

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }
    }

Drawing Basic Shapes

    context.setFillColor(UIColor.red.cgColor)
    context.fill(CGRect(x: 10, y: 10, width: 50, height: 50))

    context.setStrokeColor(UIColor.blue.cgColor)
    context.stroke(CGRect(x: 20, y: 80, width: 50, height: 50))

    context.fillEllipse(in: CGRect(x: 20, y: 80, width: 50, height: 50))

View on Github

Download