Quartz 2D drawing for IOS development (107)

1 Preface
When using Quartz 2D drawing, we usually use the subclass of UIView. Think about the drawRect of this class: add the Quartz function call to the method. This method is called every time you need to repaint the view.

2. Details
In Quartz 2D, like other Core Graphics, plotting is performed in the graphic context. Generally, it is called only the context. When drawing, We need to retrieve the current context, use this context for various Quartz graphics calls, and make this context responsible for rendering the image to the view.

The following code retrieves the current context:

CGContextRef context = UIGraphicsGetCurrentContext ();

Both Core Graphics and OpenGL are C-based APIs.

After the graphic context is defined, the context can be passed to various Core Graphics drawing functions for drawing. For example, draw a line with a 4 pixel width:

 

// Create a straight line of the current path in 4 pixels, which can be regarded as the size of the brush until a different value set by the function is called again, and the width of all lines is 4

CGContextSetLineWidth (context, 4.0 );

// Set the paint brush to red (including the stroke color, that is, the outline color. The fill color is used to fill the shape)

CGContextSetStrokeColorWithColor (context, [UIColor redColor]. CGColor );

// Move the endpoint of the current path to this location without drawing any images.

CGContextMoveToPoint (context, 10.0, 10.0 );

// Draw a line to (20, 20)

CGContextAddLineToPoint (context, 20.0, 20.0 );

// Instruct Quartz to use CGContextStrokePath to draw a straight line.

CGContextStrokePath (context );

2.1 Coordinate System

// Move the endpoint of the current path to this location without drawing any images.

CGContextMoveToPoint (context, 10.0, 10.0 );

// Draw a line to (20, 20)

CGContextAddLineToPoint (context, 20.0, 20.0 );

These floating point numbers represent locations in the Core Graphics coordinate system. It is represented by x and y coordinates. We usually use (x, y) to represent it. The upper left corner of the context is (0, 0 ). Y increases when you move down, and x increases when you move to the right.

Finally, we draw a diagonal line (10, 10) to (20, 20.

To obtain a certain application CGPoint, if the object size is obtained, CGSize is used. Quartz also declares a data type named CGRect, which is used to define a rectangle in the coordinate system. CGRect contains two elements: one is the CGPoint named origin, which determines the upper left corner of the rectangle, and the other is the CGSize named size, which determines the width and height of the rectangle.

2.2 colors
UIKit provides an Objective-C Class: UIColor. You cannot directly use the UIColor object in the Core Graphics call. Because UIColor is the CGColor package, it can be as we did in the following code snippets, use her CGColor attribute to retrieve CGColor references from the UIColor instance.

// Set the paint brush to red (including the stroke color, that is, the outline color. The fill color is used to fill the shape)

CGContextSetStrokeColorWithColor (context, [UIColor redColor]. CGColor );

2.2.1 color theory of IOS devices
In modern computers, four elements (red, green, blue (RGB color) model and transparency) are usually used to represent colors. In Quartz 2D, these are CGFloat types and can only be between 0.0 and 1.0.

A floating point value ranging from 0.0 to 1.0 is usually called a qualified floating point variable. The color value also has a transparency alpha, and the color model is RGBA.

2.2.2 convenient color Method
UIColor provides many convenient methods. You can use return [UIColor colorWithRed: 1.0f green: 0.0f blue: 0.0f alpha: 1.0f] to customize the color values;

2.3 draw images in context
With Quartz 2D, you can draw images directly in the context. For example, UIImage, method:

(1) create a CGPoint to determine the upper left corner of the image;

(2) create a CGRect to enclose the image and adjust the image size as needed to make it an appropriate overview.

You can draw a UIImage In the context as follows:

CGPoint drawPoint = CGPointMake (100366f, 100366f );

[Image drawAtPoint: drawPoint];

2.4 draw shape: polygon, straight line and curve
Quartz 2D provides many functions to simplify the creation of complex shapes. For example, draw an ellipse, define the rectangle it fits, and let Core Graphics execute the following tasks:

// Draw an ellipse

// Retrieve the current context

CGContextRef context = UIGraphicsGetCurrentContext ();

CGRect theRect = CGRectMake (0, 0, 100,100 );

CGContextAddEllipseInRect (context, theRect );

CGContextDrawPath (context, kCGPathFillStroke );

Running result:

Line:

 
 

Elliptic:

 
 

3 conclusion
The above is all content and I hope it will help you.