Chapter 12. Drawing Offscreen Quartz 2d Graphics For Mac

Jun 21, 2012 Quartz 2D drawRect method (iPhone) Ask Question. Yet somehow I still feel like I'm missing some fundamental understanding of how drawing. Home reference library technical articles industrial and engineering software chapter 2: quartz 2d drawing basics Programming with Quartz: 2D and PDF Graphics in Mac OS X Written by members of the development team at Apple, this unique guide describes the sophisticated graphics system of Mac OS X, and serves as an introduction to 2D graphics.

Learning to draw content is important in iOS. Even if you have not done it before, it is almost certain you might do it in the future. Drawing helps achieve high quality graphics independent of the device and at the same time provides great performance using the least memory. Drawing in iOS can be done using OpenGL or in native using Quartz, Core Animation or UIKit.

In this guide, we use the Core Graphics Framework which is based on Quartz for drawing in iOS.

The Core Graphics framework is a C-based API that is based on the Quartz advanced drawing engine. It provides low-level, lightweight 2D rendering with unmatched output fidelity. You use this framework to handle path-based drawing, transformations, color management, offscreen rendering, patterns, gradients and shadings, image data management, image creation, masking, and PDF document creation, display, and parsing.

– Apple Developer: Core Graphics Framework Reference

All drawings are performed on an UIView object. A UIView subclass is created and the drawing code is added to the drawRect: method by overriding it.

Whenever a view is first displayed on the screen or is updated, iOS prompts the view to draw its contents by calling the drawRect: method. The drawRect: method is called in the following cases:

• When another view overlaps on to this view/changes its position.
• When the view is hidden/made visible explicitly or by scrolling it offscreen.
• Programatically by calling the setNeedsDisplay method on the view.

Note: The drawRect: method should never be called directly on the view. Instead, if the view needs to be re-drawn, call the setNeedsDisplay method.

Before we begin with the drawing, It is better to make yourself familiar with the co-ordinate systems and points/pixel differentiation. You can read about this here: Apple Developer: Drawing and Printing Guide for iOS

Drawing

Drawing onto a view involves the following steps.

(To follow up with this tutorial, you can begin by creating a simple single view application template. Xcode: File -> New -> Project Select iOS: Single View Application)

1. Creating a custom view

For adding the drawing code, create a subclass of UIView by adding a swift file to the project (Xcode: File -> New -> File Select iOS: Source -> Swift File) and call it “simpleView“. Create a subclass of UIView as below and override the drawRect: method for writing the drawing code.

In the sample project, open the main.storyboard, add a new UIView to the ViewController’s view as a subview and set the class of this view to our custom view simpleView. Set the dimensions of the subview and add any necessary constraints. (For more on Constraints and AutoLayouts, read the post Auto Layouts in iOS.)

2. Obtaining the Graphics Context

For creating/drawing on a view, we need to initially obtain what is known as a Graphics Context. iOS will prepare for drawing based on this context for different destinations such as on-screen, bitmap or PDF. This context will only be available for the lifetime of drawRect: method.

A graphics context represents a drawing destination. It contains drawing parameters and all device-specific information that the drawing system needs to perform any subsequent drawing commands.

– Apple Developer: Quartz 2D Programming Guide

3. Setting the Graphics Context Parameters

Conceptually, a graphics context is an object that describes where and how drawing should occur, including basic drawing attributes such as the colors to use when drawing, the clipping area, line width and style information, font information, compositing options, and so on.

– Apple Developer: Drawing and Printing Guide for iOS

There are a variety of aspects you can set on the graphic context as described above. A list of which is provided in the Apple Developer: CGContext Reference and a glossary of terms is available in the Apple Developer: Core Graphics Framework Reference.

4. Creating Paths

Paths are shapes created using a lines/curves(Bézier Curves) which are vectors. And these paths need to be drawn onto the graphics context for them to be displayed on the screen.

You can use the available convenience methods of UIKit to create simple paths like rectangles/circles. For more complex paths one can make use of the UIBezierPath class to construct the required shape.

More on Drawing shapes using Bézier Paths here:

5. Drawing Paths

The paths created in the previous steps are only imaginary. i.e., the paths are not drawn onto the screen yet. Paths can be stoked/filled using the below functions:

Aaand it’s done! 🙂

So far we obtained the context, set it’s parameters, created paths and finally drew on the path. Below are few simple drawing examples illustrating how the above steps come together and complete the drawing.

Examples

1. Stroking and filling Rectangles and Circles

Requirement:

Code:

2. Drawing a Triangle using Bezier Path

Requirement:

Code:

3. Drawing an Arc/Semi-Circle using Bezier Path

Requirement:

Code:

The fill method used above implicitly closes any open paths before filling it.

If you have any questions, do leave it in the comments section below. Thanks for reading!

AnyDesk for Mac provides the features and tools you need to connect with desktops or servers in any location. Our remote desktop app ensures a stable, secure, and super-fast connection. It can be individually tailored to your specific operations, thanks to flexible license models. Set up is quick and simple. AnyDesk Remote Control 5.1.4 for MAC App Preview 2. AnyDesk is the fastest and most affordable Remote Control Software in the world! Access your devices on all platforms: Windows, macOS, Linux, Android and iOS. Www.anydesk.com for mac. AnyDesk for Mac, free and safe download. AnyDesk latest version: Log Back In and Work or Play Wherever You Are. AnyDesk is a remote desktop application with a focus on blazing-fast speeds and ease of use. Download the small AnyDesk file of 3 MB and finish urgent tasks on the go with AnyDesk’s user-friendly interface. AnyDesk is not only compatible with Windows 10, but many other operating systems and their various versions, including iOS, macOS, Linux and Android. Download AnyDesk for Mac. Downloading AnyDesk for Mac can be easily done by following our guide below. We have provided you with the download link of the software so that you can proceed with the download procedure in a hassle-free manner. Download AnyDesk.DMG. Download the setup file for Download the setup file for “AnyDesk for Mac”.

And one more thing. Ever heard of IBDesignable? No? It makes your life a lot easier when you are drawing. Read more about it here: iOS Tip: Using IBDesignable for previewing custom views

Interesting Reads

References

Related Books

• Programming with Quartz: 2D and PDF Graphics in Mac OS X (Amazon) – by David Gelphman, Bunny Laden