iOS uses Cgcontextref to draw various shapes (text, circle, line, arc, rectangle, sector, ellipse, triangle, rounded rectangle, Bezier curve, picture)

First Look at Cgcontextref:

An opaque type represents a Quartz 2D drawing environment.

The graphics context is a graphical contextual, which can be understood as a canvas, which we can paint on, and after the drawing is done, the canvas is displayed in our view, and view is considered a picture frame.

Self-learning to achieve the demo, I hope that everyone has help, the specific implementation of the code, and have a perfect explanation of the comments, there are some of my help to the blog for your reference. are in the code.

Check out the demo first:

Custom CustomView class, CustomView.h:

[CPP]View Plaincopy

#import <UIKit/UIKit.h>

#import <QuartzCore/QuartzCore.h>

#define PI 3.14159265358979323846

@interface Customview:uiview

@end

Implement class CUSTOMVIEW.M:

[CPP] view plaincopy

#import "CustomView.h"

@implementation CustomView

-(ID) initWithFrame: (CGRect) frame

{

self = [super Initwithframe:frame];

if (self) {

}

return self;

}

Override the DrawRect method, where you can customize painting and animation

-(void) DrawRect: (cgrect) rect

{

An opaque type represents a Quartz 2D drawing environment.

An opaque type of quartz 2D painting environment, equivalent to a canvas, you can paint on the above

Cgcontextref context = Uigraphicsgetcurrentcontext ();

/* Write text */

Cgcontextsetrgbfillcolor (context, 1, 0, 0, 1.0);//Set Fill Color

Uifont *font = [Uifont boldsystemfontofsize:15.0];//settings

[@ "Draw circle:" Drawinrect:cgrectmake (Ten, A, withfont:font)];

[@ "Draw line and Lone line:" Drawinrect:cgrectmake (Ten, (), ",") Withfont:font];

[@] Draw a rectangle: "Drawinrect:cgrectmake (ten, +, +) Withfont:font];

[@ "Draw fan and Ellipse:" Drawinrect:cgrectmake (Ten, Withfont:font, Max)];

[@ "Draw triangle:" Drawinrect:cgrectmake (ten, Up, up,) Withfont:font];

[@] Draw rounded rectangles: "Drawinrect:cgrectmake (Ten, 260, Withfont:font);

[@] Draw Bezier curve: "Drawinrect:cgrectmake (ten, +, +) Withfont:font];

[@] Picture: "Drawinrect:cgrectmake (Ten, 340, Withfont:font)";

/* Draw Circle */

Border Circle

Cgcontextsetrgbstrokecolor (context,1,1,1,1.0);//Color of brush lines

Cgcontextsetlinewidth (context, 1.0);//width of line

void Cgcontextaddarc (Cgcontextref c,cgfloat x, cgfloat y,cgfloat radius,cgfloat startangle,cgfloat endAngle, int Clockwise) 1 radians =180°/π (≈57.3°) degrees = radians x180°/π360°=360xπ/180 =2π radians

X, y is the dot coordinate, radius radius, startangle is the starting Radian, Endangle is the ending Radian, clockwise 0 is clockwise, and 1 is counterclockwise.

Cgcontextaddarc (context, 0, 2*pi, 0); Add a circle

Cgcontextdrawpath (context, kcgpathstroke); Draw Path

Fill Circle, no border

Cgcontextaddarc (context, 0, 2*pi, 0); Add a circle

Cgcontextdrawpath (context, kcgpathfill);//Draw Fill

Draw a large circle and fill the face

Uicolor*acolor = [Uicolor colorwithred:1 green:0.0 blue:0 alpha:1];

Cgcontextsetfillcolorwithcolor (context, acolor.cgcolor);//Fill Color

Cgcontextsetlinewidth (context, 3.0);//width of line

Cgcontextaddarc (context, 0, 2*pi, 0); Add a circle

Kcgpathfill fills a non-0-winding rule, kcgpatheofill represents a parity rule, kcgpathstroke path, Kcgpathfillstroke path Fill, Kcgpatheofillstroke represents a stroke, not a fill

Cgcontextdrawpath (context, kcgpathfillstroke); Draw Path Plus fill

/* Draw line and Lone line */

Draw Line

Cgpoint apoints[2];//Coordinate point

Apoints[0] =cgpointmake (100, 80);//coordinate 1

APOINTS[1] =cgpointmake (130, 80);//Coordinate 2

Cgcontextaddlines (cgcontextref C, const Cgpoint points[],size_t count)

points[] Coordinate array, and count size

Cgcontextaddlines (Context, apoints, 2);//Add Line

Cgcontextdrawpath (context, kcgpathstroke); Draw a path based on coordinates

Draw a smiley curve

Left

Cgcontextsetrgbstrokecolor (context, 0, 0, 1, 1);//Change brush color

Cgcontextmovetopoint (context, 140, 80);//Start coordinate P1

Cgcontextaddarctopoint (cgcontextref C, cgfloat x1, cgfloat y1,cgfloat x2, CGFloat y2, cgfloat radius)

X1,y1 and P1 form a line of coordinates p2,x2,y2 end coordinates with P3 form a line of P3,radius radius, note, need to calculate the length of the radius,

Cgcontextaddarctopoint (context, 148, 68, 156, 80, 10);

Cgcontextstrokepath (context);//painting path

Right

Cgcontextmovetopoint (context, 160, 80);//Start coordinate P1

Cgcontextaddarctopoint (cgcontextref C, cgfloat x1, cgfloat y1,cgfloat x2, CGFloat y2, cgfloat radius)

X1,y1 and P1 form a line of coordinates p2,x2,y2 end coordinates with P3 form a line of P3,radius radius, note, need to calculate the length of the radius,

Cgcontextaddarctopoint (context, 168, 68, 176, 80, 10);

Cgcontextstrokepath (context);//painting path

Right

Cgcontextmovetopoint (context, 150, 90);//Start coordinate P1

Cgcontextaddarctopoint (cgcontextref C, cgfloat x1, cgfloat y1,cgfloat x2, CGFloat y2, cgfloat radius)

X1,y1 and P1 form a line of coordinates p2,x2,y2 end coordinates with P3 form a line of P3,radius radius, note, need to calculate the length of the radius,

Cgcontextaddarctopoint (Context, 158, 102, 166, 90, 10);

Cgcontextstrokepath (context);//painting path

Note, if you still don't understand what's going on, please refer to: http://donbe.blog.163.com/blog/static/138048021201052093633776/

/* Draw Rectangle */

Cgcontextstrokerect (Context,cgrectmake (100, 120, 10, 10));//Picture box

Cgcontextfillrect (Context,cgrectmake (120, 120, 10, 10));//Fill box

Rectangle, and fill in the color

Cgcontextsetlinewidth (context, 2.0);//width of line

Acolor = [Uicolor bluecolor];//blue Blue

Cgcontextsetfillcolorwithcolor (context, acolor.cgcolor);//Fill Color

Acolor = [Uicolor Yellowcolor];

Cgcontextsetstrokecolorwithcolor (context, acolor.cgcolor);//Wireframe Color

Cgcontextaddrect (Context,cgrectmake (140, 120, 60, 30));//Picture box

Cgcontextdrawpath (context, kcgpathfillstroke);//painting path

Rectangle and fill in the gradient color

About color Reference http://blog.sina.com.cn/s/blog_6ec3c9ce01015v3c.html

http://blog.csdn.net/reylen/article/details/8622932

The first method of filling, the first way must import the class library Quartcore and #import <quartzcore/quartzcore.h>, this does not belong to the context painting, but the layer is inserted into the view layer above. So here's the design to Quartz Core layer programming.

Cagradientlayer *gradient1 = [Cagradientlayer layer];

Gradient1.frame = CGRectMake (240, 120, 60, 30);

Gradient1.colors = [Nsarray arraywithobjects: (ID) [Uicolor whitecolor]. Cgcolor,

(ID) [Uicolor Graycolor]. Cgcolor,

(ID) [Uicolor Blackcolor]. Cgcolor,

(ID) [Uicolor Yellowcolor]. Cgcolor,

(ID) [Uicolor Bluecolor]. Cgcolor,

(ID) [Uicolor Redcolor]. Cgcolor,

(ID) [Uicolor Greencolor]. Cgcolor,

(ID) [Uicolor Orangecolor]. Cgcolor,

(ID) [Uicolor Browncolor]. Cgcolor,nil];

[Self.layer insertsublayer:gradient1 atindex:0];

Second type of filling method

Cgcolorspaceref RGB = Cgcolorspacecreatedevicergb ();

CGFloat colors[] =

{

1,1,1, 1.00,

1,1,0, 1.00,

1,0,0, 1.00,

1,0,1, 1.00,

0,1,1, 1.00,

0,1,0, 1.00,

0,0,1, 1.00,

0,0,0, 1.00,

};

Cggradientref gradient = cggradientcreatewithcolorcomponents

(RGB, colors, NULL, sizeof (colors)/(sizeof (COLORS[0)));//trapezoidal shape, gradient effect

Cgcolorspacerelease (RGB);

Draw a line to form a rectangle

The role of Cgcontextsavegstate and Cgcontextrestoregstate

/*

The purpose of the Cgcontextsavegstate function is to push the current drawing state onto the stack. Later, the changes you make to the state of the drawing affect subsequent painting operations, but do not affect the copy stored on the stack. After the modification is complete, you can use the Cgcontextrestoregstate function to eject the top state of the stack and return to the previous graphic state. This push-and-eject approach is a quick way to get back to the previous graphics state and avoid undoing all state changes one at a-this is the only way to restore certain States (such as clipping paths) to their original settings.

*/

Cgcontextsavegstate (context);

Cgcontextmovetopoint (context, 220, 90);

Cgcontextaddlinetopoint (context, 240, 90);

Cgcontextaddlinetopoint (context, 240, 110);

Cgcontextaddlinetopoint (context, 220, 110);

Cgcontextclip (context);//context clipping path, the path of subsequent operations

Cgcontextdrawlineargradient (cgcontextref context,cggradientref gradient, Cgpoint startPoint, Cgpoint EndPoint, Cggradientdrawingoptions options)

Gradient the gradient color, startpoint the starting position of the beginning gradient, endpoint the end coordinate, and start the gradient before or after the options start coordinate

Cgcontextdrawlineargradient (Context, Gradient,cgpointmake

(220,90), Cgpointmake (240,110),

Kcggradientdrawsafterendlocation);

Cgcontextrestoregstate (context);//revert to the previous context

Write one more look at the effect

Cgcontextsavegstate (context);

Cgcontextmovetopoint (context, 260, 90);

Cgcontextaddlinetopoint (context, 280, 90);

Cgcontextaddlinetopoint (context, 280, 100);

Cgcontextaddlinetopoint (context, 260, 100);

Cgcontextclip (context);//clipping path

Frankly, the start and end coordinates are the direction and shape of the control gradient

Cgcontextdrawlineargradient (Context, Gradient,cgpointmake

(260, Cgpointmake), (260, 100),

Kcggradientdrawsafterendlocation);

Cgcontextrestoregstate (context);//revert to the previous context

Let's look at a circle with a color gradient.

Cgcontextdrawradialgradient (context, gradient, cgpointmake), 0.0, Cgpointmake (300, 100), 10, Kcggradientdrawsbeforestartlocation);

/* Draw sector and Ellipse */

Draw a fan, draw a circle, just set the angle of the size, forming a fan

Acolor = [Uicolor colorwithred:0 green:1 blue:1 alpha:1];

Cgcontextsetfillcolorwithcolor (context, acolor.cgcolor);//Fill Color

Specifies the angle sector around the center of the circle with a radius of 10

Cgcontextmovetopoint (context, 160, 180);

Cgcontextaddarc (Context, -60 * pi/180, -120 * pi/180, 1);

Cgcontextclosepath (context);

Cgcontextdrawpath (context, kcgpathfillstroke); Draw Path

Draw an Ellipse

Cgcontextaddellipseinrect (Context, CGRectMake (160, 180, 20, 8)); Elliptic

Cgcontextdrawpath (context, kcgpathfillstroke);

/* Draw a triangle */

Just three points, just like drawing a line, connecting three points.

Cgpoint spoints[3];//Coordinate point

Spoints[0] =cgpointmake (100, 220);//coordinate 1

SPOINTS[1] =cgpointmake (130, 220);//Coordinate 2

SPOINTS[2] =cgpointmake (130, 160);//Coordinate 3

Cgcontextaddlines (Context, spoints, 3);//Add Line

Cgcontextclosepath (context);//seal up

Cgcontextdrawpath (context, kcgpathfillstroke); Draw a path based on coordinates

/* Draw rounded rectangles */

float FW = 180;

float fh = 280;

Cgcontextmovetopoint (Context, FW, fh-20); Start coordinate right start

Cgcontextaddarctopoint (context, FW, FH, FW-20, FH, 10); Lower right corner angle

Cgcontextaddarctopoint (context, fh-20, FH, 10); Lower left angle

Cgcontextaddarctopoint (context, fw-20, 250, 10); Upper left corner

Cgcontextaddarctopoint (Context, FW, +, FW, fh-20, 10); upper right corner

Cgcontextclosepath (context);

Cgcontextdrawpath (context, kcgpathfillstroke); Draw a path based on coordinates

/* Draw Bézier curves */

Two times curve

Cgcontextmovetopoint (context, 120, 300);//Set the starting point of path

Cgcontextaddquadcurvetopoint (context,190, 310, 120, 390);//Set the control point coordinates and the end point coordinates of the Bezier curve

Cgcontextstrokepath (context);

Three-time curve function

Cgcontextmovetopoint (context, 200, 300);//Set the starting point of path

Cgcontextaddcurvetopoint (context,250, 280, 250, 400, 280, 300);//Set the control point coordinates and control point coordinates of the Bezier curve

Cgcontextstrokepath (context);

/* Picture */

UIImage *image = [UIImage imagenamed:@ "apple.jpg"];

[Image Drawinrect:cgrectmake (60, 340, 20, 20)];//draw a picture in coordinates

[Image Drawatpoint:cgpointmake (100, 340)];//Keep the image size at point points to start drawing pictures, you can remove the comments to see

Cgcontextdrawimage (Context, CGRectMake (+, 340, +), image. Cgimage);//Use this to make the picture upside down, refer to http://blog.csdn.net/koupoo/article/details/8670024

Cgcontextdrawtiledimage (context, CGRectMake (0, 0,), image. Cgimage);//Tile map

}

@end

iOS uses Cgcontextref to draw various shapes (text, circle, line, arc, rectangle, sector, ellipse, triangle, rounded rectangle, Bezier curve, picture)