­
  • Home
  • About
  • Our Apps
  • Learn
  • Contact
Login

Register

Login
Seemu Apps Seemu Apps
  • Home
  • About
  • Our Apps
  • Learn
  • Contact

    Swift Introduction Core Graphics for Beginners

    Home ios Swift Introduction Core Graphics for Beginners

    Swift Introduction Core Graphics for Beginners

    Feb 6, 2017 | Posted by Andrew | ios, swift, tutorial, xcode |

    Core graphics is a lightweight framework used to make 2d graphics and animations. It runs extremely fast, and is very flexible in what it can do. Core graphics sets at a lower level then UIKit, this gives you more control, however it is more difficult to setup and requires more knowledge. Lets take a look at drawing a square and circle.

    Drawing a Square

    Lets start of by drawing a simple square in core graphics. Create a new single view application in xcode, then open up the ViewController.swift, all the drawing is done in code!

    In viewDidLoad() add the following code, and run the app and you will see your square draw as above:

            let squarePath = UIBezierPath() // 1
            squarePath.move(to: CGPoint(x: 100, y: 100)) // 2
            // 3 & 4
            squarePath.addLine(to: CGPoint(x: 200, y: 100))
            squarePath.addLine(to: CGPoint(x: 200, y: 200))
            squarePath.addLine(to: CGPoint(x: 100, y: 200))
            
            squarePath.close() // 5
            
            
            let square = CAShapeLayer() // 6
            square.path = squarePath.cgPath // 7 Apply the squarePath to our layer
            square.fillColor = UIColor.red.cgColor // 8 Fill it with red
            self.view.layer.addSublayer(square) // 9 Add it to our view

    Wow – that’s alot of code just for a square, and pretty complicated if this is your first time using core graphics! The animation below shows what each line of code is doing visually.

     

    Essentially whats happening is:

    1. Define a new UIBeizer path which is used to draw the shape path in coordinates.
    2. Move the “pencil” to the starting coordinates
    3. Draw a line from the previous point to the new point
    4. This repeats to draw the outline of a square
    5. When the square has finished drawing we need to close it off, E.g remove the “pencil” from the “paper” (The screen)
    6. Create a new CAShapeLayer, this is whats drawn to the screen
    7. Set the shape layer path to the square we just drew
    8. Fill in the square we drew with a red color
    9. Draw it to user’s the screen

    Phew who knew a square would be complicated?

    Why use Core Graphics?

    Well usually you use it if there is something that you cannot accomplish with UIKit which is usually used to add images, buttons and basics shapes to your application. One example is the following animation which is done in core graphics, you can view the tutorial here.

    You would also use core graphics for the following reasons:

    • It runs faster then UIKit
    • When developing games using SpriteKit
    • You need a view or shape that will adjust dynamically to data. E.g Drawing stock charts from stock data

    So pretty much use UIKit where you can, and if it does not solve your problem start looking at core graphics.

    Drawing a Circle

    Now lets draw a circle, add the following function:

        func circlePathWithCenter(center: CGPoint, radius: CGFloat) -> UIBezierPath {
            let circlePath = UIBezierPath()
            circlePath.addArc(withCenter: center, radius: radius, startAngle: -CGFloat(M_PI), endAngle: -CGFloat(M_PI/2), clockwise: true)
            circlePath.addArc(withCenter: center, radius: radius, startAngle: -CGFloat(M_PI/2), endAngle: 0, clockwise: true)
            circlePath.addArc(withCenter: center, radius: radius, startAngle: 0, endAngle: CGFloat(M_PI/2), clockwise: true)
            circlePath.addArc(withCenter: center, radius: radius, startAngle: CGFloat(M_PI/2), endAngle: CGFloat(M_PI), clockwise: true)
            circlePath.close()
            return circlePath
        }

    Then add the code to draw the circle on screen to viewDidLoad:

            let circle = CAShapeLayer()
            circle.path = circlePathWithCenter(center: CGPoint(x: 200,y: 400), radius: 50).cgPath
            circle.fillColor = UIColor.blue.cgColor
            self.view.layer.addSublayer(circle)

    Now run and you will see the circle drawn on screen:

    So drawing a circle is different from the square, you can see it is drawn with “addArc”. Essentially what this does is draw an arc

    This completes a circle, we then fill it in with the color blue and draw it to the screen in viewDidLoad().

    download source code

     

    Tags: cashapelayercirclecore graphicssqureswift 3uikit
    2
    Share

    About Andrew

    Andrew is a 24 year old from Sydney. He loves developing iOS apps and has done so for two years.

    You also might be interested in

    Swift Google Maps SDK Integration with current location and markers

    Feb 18, 2017

    Integrating Google Maps SDK into your iOS app is easy[...]

    Swift – Make a Trivia Quiz Game

    Feb 16, 2017

    In this Swift quiz app tutorial we will look at[...]

    Swift Animated Square to Circle Transform with Core Graphics

    Feb 5, 2017

    In this tutorial we will be making a Square button[...]

    Welcome

    Hi I am Andrew and welcome to Seemu Apps! Have a look around, we provide tutorials for primarily iOS apps.
    Bluehost website hosting discount

    Seemu’s Studio Setup

    Blue Yeti Microphone
    Rode Stand
    Spider Shock Mount
    Mac Keyboard Cover
    Screenflow - recording software

    Contact Us

    We're currently offline. Send us an email and we'll get back to you, asap.

    Send Message

    Footer

    :)

    © 2025 · Your Website. Theme by HB-Themes.

    • Home
    • About
    • Our Apps
    • Learn
    • Contact
    Prev Next

    Notifications