IOS 2D plotting (Quartz 2D) Overview

IOS 2D plotting (Quartz 2D) Overview

 

Recently I have been studying custom controls. to thoroughly customize the views of controls, I still need to inherit the UIView. Although I am very familiar with CALayer and its subclass, however, the powerful Quartz 2D framework is still ambiguous. Therefore, I decided to study and tentatively set aside seven articles to explain and write some demos.
Official documentation

The Demo code in this article is in the last part.

What is Quartz 2D used?

Quartz 2D is a Core Graphics (so most related methods start with CG). It is a powerful 2D Graphics engine provided by iOS/Mac OSX on the kernel, the drawing engine is device independent. That is to say, you do not need to care about the size of the device, the device resolution, as long as the use of Quartz 2D, these devices will be automatically processed. Quartz 2D provides the following powerful functions:

Transparency layers shadow path-based drawing (path-based drawing) Off-screen rendering (offscreen rendering) Complex color Processing (advanced color management) anti-sawtooth rendering (anti-aliased rendering) PDF creation, presentation, parsing (this part is not in this series) with Core Animation, OpenGL ES, and UIKit for Complex Functions Canvas-The Graphics Context

Since drawing is mentioned, there is a container to include the drawing result and then render the result to the screen. The Z 2D container is the CGContextRef data model. This data model is a structure of C that stores all the information required for rendering to the screen.
So where can Graphics Context be rendered at last?

Layer Window printer PDF Bitmap (image)

Draw Model

Quartz 2D uses painter's model, which means that each painting is a layer, and then stacked to the canvas in order. For example

Data Type

The data types in Quartz 2D are transparent. That is to say, you only need to use them without actually accessing the variables. Specific data types include

CGPathRef: Specifies the path type. CGImageRef is used to draw a path (note that the canvas with the ref suffix is generally used to draw a graph). CGImageRef is used to draw a bitmap CGLayerRef, draw a layer, and reuse a layer. CGPatternRef can be rendered, repeat CGShadingRef and CGGradientRef, draw a gradient (such as a color gradient) CGFunctionRef, define the callback function, CGShadingRef and CGGradientRef auxiliary types CGColorRef and CGColorSpaceRef, and define how to process the color CGFontRef, draw other types of text (pdf is not described in this series, so it will not be involved) Drawing status

When drawing with quartz 2d, you often need to set the color and font, set the coordinate origin transformation of the context, and rotate the context. All of these influences are the current drawing status. Use the stack method in Context to save the drawing status. Call CGContextSaveGState to save the copy of the current drawing status to the stack. Use CGContextRestoreGState to display the top-level drawing status of the stack and set it to the current drawing status. Note that not all parameters are saved. The parameters in the following table are saved.

Coordinate System

Unlike the coordinate system of UIKit, the coordinate system of Quartz 2D is in the lower left corner.

Quartz uses operations such as rotation and displacement of the coordinate system to draw complex animations.
However, there are two locations where the coordinate system is a normal UIKit coordinate system.

The context of the UIView is returned by uigraphicsbeginimagecontextwitexceptions using this method.

A simple Demo

Create a subclass of UIView, And Then overridedrawRect

-(Void) drawRect :( CGRect) rect {CGContextRef context = UIGraphicsGetCurrentContext (); CGContextSetFillColorWithColor (context, [UIColor lightGrayColor]. CGColor); CGContextFillRect (context, rect); // fill in the entire area CGRect testRect = CGRectMake (10, 10, 20, 20); CGContextAddRect (context, testRect ); CGContextSetFillColorWithColor (context, [UIColor blueColor]. CGColor); // modify the paint brush color CGContextFillRect (context, testRect); // fill some areas}

Then, call

    LeoDemoView * demoView = [[LeoDemoView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];    [self.view addSubview:demoView];

Effect

We can see that the coordinate system is a normal UIKit coordinate system.

Next, we will draw a text "Leo" above and add it at the end of the drawRect above, <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHByZSBjbGFzcz0 = "brush: java;"> NSString * toDraw = @Leo; [toDraw drawAtPoint:CGPointMake(CGRectGetWidth(rect)/2, CGRectGetHeight(rect)/2) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12],NSForegroundColorAttributeName:[UIColor greenColor]}];

We can see that the painting is covered by a layer,

Finally, we draw a red heart in the lower right corner, but we hope the red heart will be the opposite. The above plot is used here.Status Stack. Add the following code at the end of drawRect:

CGContextSaveGState (context); CGContextTranslateCTM (context, rect. size. width, rect. size. height); CGContextRotateCTM (context, M_PI); NSString * redHeart = @??; // MarkDown does not display redHeart drawAtPoint: CGPointMake (0, 0) withAttributes :@ {NSFontAttributeName: [UIFont systemFontOfSize: 15]}]; CGContextRestoreGState (context );}

Effect

Here, beginners may not understand what is going on. I explain it step by step through illustrations

This line of code moves the coordinate system to the bottom right corner
CGContextTranslateCTM(context,rect.size.width,rect.size.height);

Then rotate the coordinate system counterclockwise for 180 degrees.

    CGContextRotateCTM(context, M_PI);

Coordinate System at this time

At this time, refer to the coordinate system to draw and see the opposite. Wow!