quartz2d drawing of common graphs: lines, polygons, circles

UI Advanced
quartz2d

http://ios.itcast.cn iOS Academy

Master

DrawRect: Use of methods

Drawing of common graphs: lines, polygons, circles

Settings for drawing state: text color, line width, etc.

Save and restore Graphics context State (graphics context stack)

Picture clipping

What is quartz2d

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

Quartz 2D can do the work

Ø Draw graphic: line \ triangle \ rectangle \ Circle \ Arc etc. Ø draw text Ø draw \ Generate picture (image) Ø read \ Generate pdfø\ crop picture Ø Custom UI Control O ...

quartz2d instances

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

Ø Crop Picture

quartz2d instances

Ø Graffiti \ Artboard

quartz2d instances

Ø gesture Unlock O

quartz2d instances

Ø Report: Line chart \ pie chart \ Bar Chart Ø

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: Display picture Øuibutton: Display picture and text at the same time (can click) o ... O

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)

Graphics context

Graphics context: is a cgcontextref type of data

The role of the graphics context

Ø Save drawing information, drawing status Ø Determine the output target to draw (where to go?) ）

(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

Graphics context

The quartz2d provides several types of graphics Context:

Øbitmapgraphics contextøpdfgraphics contextøwindowgraphics contextølayergraphics ContextØPrinterGraphics Context

Custom View

How do I customize view with quartz2d? (Custom UI controls)

How to use quartz2d to draw things to the view?

Ø First, there must be a graphical context, because it can save the drawing information, and decide where to draw to Ø Secondly, the graphics context has to be associated with the view in order to draw the content to the view O

Steps to customize view

Ø Create a new class that inherits from Uiviewø implementation-(void) DrawRect: (CGRect) Rect method, Then in this method you get the graphic context you associated with the current view U draw the corresponding graphic content u use the graphics context to render all the rendered content to the view above

DrawRect:

Why implement DrawRect: How can I draw to a view?

Ø Because the graphical context associated with the view can be obtained in the DrawRect: Method o

DrawRect: When is the method called?

Ø When the view is first displayed on the screen (displayed on UIWindow) Ø Call View's Setneedsdisplay or setneedsdisplayinrect:

Drawing order

QUARTZ2D Notice

The quartz2d API is a pure C language.

The Quartz2d API comes from the Coregraphics framework

Data types and functions are basically prefixed with CG

Øcgcontextreføcgpathreføcgcontextstrokepath (CTX); O......

DrawRect: Context acquired in

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

quartz2d code steps for drawing

1. Get the graphics context

Cgcontextref ctx= Uigraphicsgetcurrentcontext ();

2. Stitching the path (the following code is to make a line)

Cgcontextmovetopoint (ctx,10, 10);

Cgcontextaddlinetopoint (ctx,100, 100);

3. Draw the Path

Cgcontextstrokepath (CTX); Cgcontextfillpath (CTX);

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,

CGFloat radius, cgfloat startangle, CGFloat endangle, Intclockwise)

Common Drawing Path functions

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

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)

Matrix operations

A matrix operation that allows all paths drawn to the context to be changed together

Ø Zoom

void Cgcontextscalectm (Cgcontextref C, cgfloat SX, CGFloat Sy)

Ø rotation

void Cgcontextrotatectm (Cgcontextref C, Cgfloatangle)

Øø panning

void Cgcontexttranslatectm (Cgcontextref c, CGFloat tx, cgfloat ty)

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 Corefoundation's Cfretain and cfrelease. Note You cannot pass null values to these functions

Image watermark

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

The role of watermarks

Ø Tell you where this picture came from O is mainly the website for copyright issues, advertising and added

Image watermark

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

Ø Open a bitmap-based graphics context

void Uigraphicsbeginimagecontextwithoptions (Cgsizesize, Boolopaque, Cgfloatscale)

Ø Get the picture from the context (UIImage)

uiimage* Uigraphicsgetimagefromcurrentimagecontext ();

Ø End Bitmap-based graphics context

void Uigraphicsendimagecontext ();

Picture clipping

A lot of app avatars, they're all round.

Picture clipping

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)

Screen

Sometimes you need to intercept a piece of content on the screen, like a fishing talent game

Q & A

Life is like toilet paper, when it's okay, try to be less torn. Time is like toilet paper, look at quite a lot, with the use of it is gone ...

Jonathan_lee

quartz2d drawing of common graphs: lines, polygons, circles