1, Quartz 2D Drawing Foundation

Quartz 2D Drawing

The core API of the Quartz 2D drawing is Cgcontextref, which is designed to draw a variety of graphics.

Follow the public number: ioscoding, sharing high-quality iOS programming technology. By:shuju

1.1 Quartz 2D Drawing Basics: Cgcontextref

The key steps to using the Quartz 2D drawing are two steps: Get cgcontextref; Call Cgcontextref's method to draw.

There are different ways to get cgcontextref in various scenarios, and here's how to get cgcontextref in the most common scenarios in iOS development.

1. Get cgcontextref when customizing UIView

The way to develop a custom uiview is to develop a subclass that inherits UIView and override that UIView's DrawRect: Method, when the UIView is displayed every time, or when the UIView content needs to be updated. The system will automatically call the UIView DrawRect: method. The drawing environment is automatically configured before calling the DrawRect: method, so the program can get the Cgcontextref drawing API simply by using the following function:

 
   
  

  
    
   
Cgcontextref ctx = uigraphicsgetcurrentcontext();
 
   
  

After you get cgcontextref, you can draw.

It should be noted that when overriding UIView's DrawRect: Method drawing, its drawing API coordinates the origin in the upper-left corner of the control, the x-axis, the greater the x-coordinate, the more right position, the y-axis, the greater the y-coordinate, the lower the position.

2. Get cgcontextref when creating bitmaps

If you need to get cgcontextref when creating a bitmap, the program needs to call the Uigraphicsbeginimagecontext () function to create an in-memory picture. You can then call Uigraphicsgetcurrentcontext () to get the cgcontextref of the drawing. For example, the following code.

 
   
  

  
    
   
Create an in-memory picture
  
    
   
Uigraphicsbeginimagecontext (Cgsizemake (320, 480));
  
    
   
Gets the cgcontextref that performs the drawing to the in-memory picture
  
    
   
Cgcontextref CTX  =  Uigraphicsgetcurrentcontext (); 
 
   
  

The core API of the Quartz 2D drawing is cgcontextref, which is not an object. Since the Quartz 2D itself is not object-oriented, it is a process-oriented Api,quartz 2D that provides a number of functions to complete the drawing.

The drawing functions provided by Quartz 2D are shown in table 1.2.

Table 1.2 Quartz 2D drawing-related functions

function signature	Brief description
void Cgcontextclearrect (Cgcontextref C, CGRect rect);	Erases a drawing drawn on a specified rectangular area
void Cgcontextdrawpath (cgcontextref C, cgpathdrawingmode mode);	Draws the package in the current cgcontextref using the specified pattern Contains the path. The second parameter supports Kcgpathfill, Kcgpatheofill,kcgpathstroke,kcgpathfillstroke,Kcgpatheofillstroke , and other enumeration values
void Cgcontexteofillpath (Cgcontextref c);	Use the parity rule to populate the area surrounded by the path. Odd I rule refers to: If a point is surrounded by a path odd number of times, The system draws the point, and if the path is surrounded by an even number of times, the system does not draw the point
void Cgcontextfillpath (Cgcontextref c);	Fills the area surrounded by the path
void Cgcontextfillrect (Cgcontextref c,cgrect rect);	Rectangle filled with rect represented
void Cgcontextfillrects (Cgcontextref c,const cgrect rects[], size_t count);	Fill multiple rectangles
void Cgcontextfillellipseinrect (Cgcontextref context, cgrect rect);	Fills the inner-tangent ellipse region of a rect rectangle
void Cgcontextstrokepath (Cgcontextref c);	Draws a path using the line width of the current cgcontextref setting
void Cgcontextstrokerect (Cgcontextref C, CGRect rect);	Draws a rectangle using the line width of the current cgcontextref setting
void Cgcontextstrokerectwithwidth (Cgcontextref c, CGRect rect, cgfloat width);	Draw a rectangular box with a specified line width
void Cgcontextreplacepathwithstrokedpath (Cgcontextref c);	Use the area covered when drawing the current path as the current cgcontextref The new path in the. For example, if the current cgcontextref contains a A circular path and a line width of ten, after calling the method, the current cgcontextref Will contain a circular path with a ring width of ten
void Cgcontextstrokeellipseinrect (Cgcontextref context,cgrect rect);	Draws the inner-tangent ellipse of a rect rectangle using the line width of the current cgcontextref setting
void Cgcontextstrokelinesegments (Cgcontextref c, Const Cgpoint points[], size_t count);	Draws multiple segments using the line width of the current cgcontextref setting. The The method needs to pass in an array of 2N cgpoint , where 1,2 points Make up the first line segment,3,4 points make up the 2 line segment, and so on

Most of the methods in table 12.2 involve using the path, which is represented by another api:cgpathref. Cgpathref represents any shape that is connected by any number of lines or curves, and when Cgcontextref is drawn according to Cgpathref, it can draw arbitrary shapes.

For more information on how to use Cgcontextref to build paths and add paths, this section will be described in more detail here, with the simplest way to draw geometric shapes such as lines, rectangles, and ellipses.

Before drawing, you also need to set the color of the drawing, line thickness and other properties, Quartz 2D provides the function shown in table 12.3 to set the drawing information.

Table 12.3 related functions for setting drawing properties

Method signature	Brief description
void Cgcontextsavegstate (Cgcontextref c);	Save Cgcontextref Current drawing state to restore it later
void Cgcontextrestoregstate (Cgcontextref c);	Restores the state of Cgcontextref to the state of the most recent save
Cginterpolationquality cgcontextgetinterpolation Quality (cgcontextref c);	Gets the interpolation quality of the current cgcontextref when the image is enlarged
void Cgcontextsetinterpolationquality (Cgcontextref c, cginterpolationquality quality);	Sets the interpolation quality of the current cgcontextref when the image is enlarged
void cgcontextsetlinecap (Cgcontextref C, Cglinecap cap);	Sets the drawing shape for the end of the segment. This property supports the following three values. kcglinecapbutt : The property value specifies that the end point is not drawn, and the Line ends directly at the end. This is the default value. kcglinecapround : This property value specifies the drawing of a circular end, Draws a semicircle with a diameter of line width at the end of the line. kcglinecapsquare : This property value specifies that the square ends are drawn. At the end of the Line, draw a square with a half edge length of line width. You need To note that the endpoints of this shape are very similar to the endpoints of the butt shape, Just take this form of the end line a little bit longer.
void Cgcontextsetlinedash (Cgcontextref c, CGFloat phase, const cgfloat lengths[],size_t count);	Sets the point line mode used to draw the border,Quartz 2D Very powerful point-line mode. We'll show you in detail later.
void Cgcontextsetlinejoin (Cgcontextref C, cglinejoin join);	Sets the style of a line connection point that supports the following three values: Kcglinejoinmeter: This is the default property value. The connection point of the square is shaped as shown. kcglinejoinround: The connection point shape of the square as shown. kcglinejoinbevel: The connection point shape of the square as shown
void Cgcontextsetlinewidth (Cgcontextref C, cgfloat width);	Set the line width when drawing lines and borders
void Cgcontextsetmiterlimit (Cgcontextref C, cgfloat limit);	This method is used to control the length of a sharp arrow when the connection point style is set to meter style.
void Cgcontextsetpatternphase (Cgcontextref C, cgsize phase);	Sets the phase of the cgcontextref with bitmap fills
void Cgcontextsetfillpattern (Cgcontextref c, Cgpatternref pattern,const cgfloat components[]);	Set the cgcontextref to use a bitmap fill
void Cgcontextsetshouldantialias (Cgcontextref C, bool Shouldantialias);	Sets whether the cgcontextref should be antialiasing (that is, the edge of a smooth graphic curve)
void Cgcontextsetstrokepattern (Cgcontextref c, Cgpatternref pattern, const cgfloat components[]);	Set the cgcontextref to draw lines, borders using bitmaps

Continuation table

Method signature	Brief description
void Cgcontextsetblendmode (cgcontextref context,cgblendmode mode);		Sets the overlay mode for the cgcontextref . Quartz 2D Supports multiple overlay modes, followed by an introduction to overlay mode
void Cgcontextsetallowsantialiasing (Cgcontextref context, bool allowsantialiasing);		Sets whether the Cgcontextref allows anti-aliasing
void Cgcontextsetallowsfontsmoothing (Cgcontextref context, bool allowsfontsmoothing);		Sets whether the Cgcontextref allows smooth fonts
void Cgcontextsetshouldsmoothfonts (Cgcontextref c,bool shouldsmoothfonts);		Sets whether the Cgcontextref allows smooth fonts
void Cgcontextsetalpha (Cgcontextref C, CGFloat Alpha);		Set global transparency
void Cgcontextsetcmykfillcolor (Cgcontextref c, CGFloat Cyan, CGFloat Magenta, cgfloat yellow,cgfloat black, cgfloat Alpha);		Use CMYK color mode to set the fill color of the cgcontextref
void Cgcontextsetcmykstrokecolor (Cgcontextref c, CGFloat Cyan, CGFloat Magenta, cgfloat yellow,cgfloat black, cgfloat Alpha);		Use CMYK color mode to set the line color of the cgcontextref
void Cgcontextsetfillcolorwithcolor (cgcontextref C, cgcolorref color);		Use the specified color to set the fill color of the cgcontextref
void Cgcontextsetstrokecolorwithcolor (cgcontextref C, cgcolorref color);		Sets the line color of the cgcontextref using the specified color
void Cgcontextsetgrayfillcolor (Cgcontextref C, CGFloat Gray, CGFloat Alpha);		Use gray to set the fill color of the cgcontextref
void Cgcontextsetgraystrokecolor (Cgcontextref C, CGFloat Gray, CGFloat Alpha);		Use gray to set the line color of the cgcontextref
void Cgcontextsetrgbfillcolor (Cgcontextref C, CGFloat Gray, CGFloat Alpha);		Use the RGB color mode to set the fill color of the cgcontextref
void Cgcontextsetrgbstokecolor (Cgcontextref C, CGFloat Gray, CGFloat Alpha);		Use the RGB color mode to set the line color of the cgcontextref
void Cgcontextsetshadow (Cgcontextref context, Cgsize offset, cgfloat blur);		Sets the offset of the shadow in the X,Y direction, and the degree of ambiguity (Blur The larger the value, the more blurred the shadow. The function does not set the shadow color, Use 1/3 transparent black (i.e. rgba{0, 0, 0, 1.0/3.0}) as the shadow color by default
void Cgcontextsetshadowwithcolor (Cgcontextref context, Cgsize offset, cgfloat blur, cgcolorref color);		Sets the offset of the shadow in the X,Y direction, and the color of the blur and shadow

1, Quartz 2D Drawing Foundation