iOS Development--ui Advanced Chapter (15) quartz2d Introduction

I. Introduction of QUARTZ2D

1. What is quartz2d
Quartz 2D is a two-dimensional drawing engine that supports both iOS and Mac systems

Quartz 2D can do the work
Drawing: lines \ triangles \ rectangles \ Circles \ Arcs, etc.
Draw text
Draw \ Generate picture (image)
Read \ Generate PDF
\ crop a picture
Customizing UI Controls

2. quartz2d instances
Quartz 2D can do a lot of powerful things, such as

Crop a picture

Graffiti \ Artboard

Gesture Unlocking

Report: Line chart \ pie chart \ Histogram

Second, custom view

1. The value of quartz2d in iOS development
To make it easy to build an aesthetically pleasing UI, iOS provides a uikit framework with a variety of UI controls
UILabel: Display text
Uiimageview: Show Pictures
UIButton: Simultaneous display of pictures and text (can be clicked)
... ...

Use the controls provided by the Uikit framework to cobble together, build and present some simple, common UI interfaces

However, some UI interfaces are extremely complex and more personalized and cannot be implemented with normal UI controls, so you can use quartz2d technology to draw the structure inside the control and customize what the control looks like

In fact, the contents of most controls in iOS are drawn through quartz2d.

As a result, quartz2d is an important value in iOS development: Custom view (custom UI controls)

2. Graphics context
Graphics context: is a cgcontextref type of data

The role of the graphics context
Save drawing information, drawing status
Decide where to draw the output target (where to draw?) ）
(The output target can be a PDF file, a bitmap or a display window)

The same set of drawing sequences, specifying different graphics Context, can draw the same image to different targets

The quartz2d provides several types of graphics Context:
Bitmap Graphics Context
PDF Graphics Context
Window Graphics Context
Layer Graphics Context
Printer Graphics Context

3. Custom View
How to use quartz2d to draw things to the view?
First, you have to have a graphical context, because it saves the drawing information and determines where to draw it.
Second, the graphics context must be associated with the view to draw the content to the view

Steps to customize view
Create a new class that inherits from UIView
Implement-(void) DrawRect: (CGRect) Rect method, and then in this method
Gets the graphics context associated with the current view
Draw the appropriate graphic content
Renders all rendered content to the view using a graphical context

4, DrawRect:
Why implement DrawRect: How can I draw to a view?
Because the graphics context associated with the view can be obtained in the DrawRect: method

DrawRect: When is the method called?
When view is first displayed on the screen (added to UIWindow)
Call view's Setneedsdisplay or Setneedsdisplayinrect: when

5. Drawing Order

6, quartz2d Notice
The quartz2d API is a pure C language.

Quartz2d's API comes from the core graphics framework

Data types and functions are basically prefixed with CG
Cgcontextref
Cgpathref
Cgcontextstrokepath (CTX);
......

7. DrawRect: The context (why the view can show something)
After you get the context in the DrawRect: method, you can draw something to the view

There is a layer property inside the view, DrawRect: A layer Graphics Context is obtained in the method, so the drawing is actually drawn to the view layer.

View is able to show things entirely because of its inner layer

Three, the drawing realization

1. Code steps for quartz2d drawing
1) Get the graphics context

Cgcontextref CTX = Uigraphicsgetcurrentcontext ();

2) Stitching path (the code below is a line segment)

Ten Ten  );

3) Draw the path

// Cgcontextfillpath (CTX);

2. Common Stitching Path function
Create a new starting point

void Cgcontextmovetopoint (cgcontextref C, CGFloat x, cgfloat y)

Add a new segment to a point

void Cgcontextaddlinetopoint (cgcontextref C, CGFloat x, cgfloat y)

Add a rectangle

void Cgcontextaddrect (cgcontextref C, CGRect rect)

Add an ellipse

void Cgcontextaddellipseinrect (cgcontextref context, CGRect rect)

Add an arc

void Cgcontextaddarc (cgcontextref C, CGFloat x, cgfloat y,  int clockwise)

3. Common Drawing Path function
Mode parameter determines the pattern to be drawn

void Cgcontextdrawpath (cgcontextref C, Cgpathdrawingmode mode)

Draw a hollow path

void Cgcontextstrokepath (Cgcontextref c)

Draw a solid path

void Cgcontextfillpath (Cgcontextref c)

Tip: Functions that are usually started with Cgcontextdraw, Cgcontextstroke, and Cgcontextfill are used to draw the path

4, the operation of the graphics context stack
Save the current context copy to the top of the stack (the stack is called the "graphics context stack")

void Cgcontextsavegstate (Cgcontextref c)

Stack the context of the top of the stack, replacing the current context

void Cgcontextrestoregstate (Cgcontextref c)

5. Matrix operation
A matrix operation that allows all paths drawn to the context to be changed together
Scaling

void CGCONTEXTSCALECTM (cgcontextref C, cgfloat SX, CGFloat Sy)

Rotating

void CGCONTEXTROTATECTM (cgcontextref C, cgfloat angle)

Translation

void CGCONTEXTTRANSLATECTM (Cgcontextref C, CGFloat tx, cgfloat ty)

6. quartz2d Memory Management
objects created with a function that contains "create" or "Copy" must be freed after use, or a memory leak will result

Object obtained with a function that does not contain "Create" or "Copy", you do not need to release

If an object is retain and is no longer in use, you need to release it

You can use the Quartz 2D function to specify retain and release an object. For example, if you create a Cgcolorspace object, use the functions Cgcolorspaceretain and cgcolorspacerelease to retain and release the object.

You can also use the Cfretain and cfrelease of the core Foundation. Note You cannot pass null values to these functions

Four, practical functions

1. Image watermark
Watermark: A translucent logo, text, or icon added to the image to prevent others from stealing pictures

The role of watermarks
I'll tell you where this picture came from.
Some websites are added for copyright issues and ads.

Sometimes, watermark technology is also needed in the mobile client app.

For example, when a user finishes a photo, a watermark can be printed on the photo to identify which user the image belongs to.

Implementation: Using QUARTZ2D, the watermark (text, LOGO) to the bottom right corner of the picture

Core code
To open a bitmap-based graphics context

void     Uigraphicsbeginimagecontextwithoptions (cgsize size, BOOL opaque, cgfloat scale)

Get a picture from the context (UIImage)

uiimage* Uigraphicsgetimagefromcurrentimagecontext ();

Ending a bitmap-based graphics context

void     Uigraphicsendimagecontext ();

2, Picture cutting
A lot of app avatars, they're all round.
Then you need to cut a normal picture into a circle.

Core code

void Cgcontextclip (Cgcontextref c)

Crop the path that is currently drawn up or down (it cannot be displayed beyond the clipping area)

3. Screen
Sometimes you need to intercept a piece of content on the screen
Core code

-(void) Renderincontext: (cgcontextref) CTX;

Call the Renderincontext of a view's layer: method to

iOS Development--ui Advanced Chapter (15) quartz2d Introduction