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

Source: Internet
Author: User
Tags draw box uikit

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: #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> #define PI 3.14159265358979323846@interface Customview:uiview@end Implementation class CUSTOMVIEW.M: #import "CustomView.h" @implementation    customview-(ID) initWithFrame: (cgrect) frame{self = [super Initwithframe:frame]; if (self) {} return to self;} Override the DrawRect method, where you can customize painting and animation-(void) DrawRect: (cgrect) rect{//an Opaque type that represents a Quartz 2D drawing Enviro    Nment.        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    ];//set [@] Draw circle: "Drawinrect:cgrectmake (Ten, A, A, 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 round Cgcontextsetrgbstrokecolor (context,1,1,1,1.0);//Brush Line Color cgcontextsetlinewidth (context, 1.0);//width of line void Cgcontextaddarc (Cgcontextref c,cgfloat x, cgfloat y,cgfloat radius,cgfloat startangle,cgfloat endAngle, int clock WISE) 1 radians =180°/π (≈57.3°) degrees = radians x180°/π360°=360xπ/180 =2π radians//x, y for dot coordinates, radius radius, startangle for start radians, endangle for end radians, clock    Wise 0 is clockwise and 1 is counterclockwise. Cgcontextaddarc (context, 0, 2*pi, 0); Add a circle Cgcontextdrawpath (context, kcgpathstroke); Draw path//fill circle, borderless cgcontextaddarc (context, 0, 2*pi, 0); Add a circle Cgcontextdrawpath (context, kcgpathfill);//Draw a fill//Draw a great circle and fill the face Uicolor*acolor = [Uicolor colorwithred:1 GRE    en:0.0 blue:0 alpha:1]; CgcontextsetfillcolorwithcOlor (context, acolor.cgcolor);//Fill Color cgcontextsetlinewidth (context, 3.0);//Line width Cgcontextaddarc (context, 250, 40, 40 , 0, 2*PI, 0); Add a circle//kcgpathfill fill 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 the path and fill/* Draw line and Lone Line///Draw line cgpoint apoints[2];//coordinate point apoints[0] =cgpointmake (100, 80);//coordinates 1 APOINTS[1] =cg Pointmake (130, 80);//coordinates 2//cgcontextaddlines (cgcontextref C, const cgpoint points[],size_t count)//points[] coordinate array, and Co Unt size Cgcontextaddlines (context, apoints, 2);//Add line Cgcontextdrawpath (context, kcgpathstroke); Draw path according to coordinates//Draw smiley arc//left Cgcontextsetrgbstrokecolor (context, 0, 0, 1, 1);//Change brush color Cgcontextmovetopoint (conte XT, 140, 80);//Start coordinate P1//cgcontextaddarctopoint (cgcontextref C, cgfloat x1, cgfloat y1,cgfloat x2, CGFloat y2, CGFloat R Adius)//x1,y1 and P1 form a line of coordinates p2,x2,y2 end coordinates with P3 to form a line of P3,radius radius, note that 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//cgcontextaddarctopo Int (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    P3,radius radius of the line, note that the length of the radius needs to be calculated, Cgcontextaddarctopoint (context, 168, 68, 176, 80, 10); Cgcontextstrokepath (context);//painting path//Right Cgcontextmovetopoint (context, 150, 90);//start coordinate P1//cgcontextaddarctopo Int (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    P3,radius radius of the line, note that the length of the radius needs to be calculated, Cgcontextaddarctopoint (context, 158, 102, 166, 90, 10); Cgcontextstrokepath (context);//painting path//note, if you still do not understand what is going on, please refer to: http://donbe.blog.163.com/blog/static/ 138048021201052093633776//* Draw Rectangle */cgcontextstrokerect (Context,cgrectmake (100, 120, 10, 10));//Draw Box Cgcontextfi Llrect (Context,cgrectmake (120, 120, 10, 10));//Fill the box//Rectangle and discard the color CgcontexTsetlinewidth (context, 2.0);//width of the line acolor = [Uicolor bluecolor];//blue blue cgcontextsetfillcolorwithcolor (context, ACo Lor.    Cgcolor);//Fill Color acolor = [Uicolor Yellowcolor]; Cgcontextsetstrokecolorwithcolor (context, acolor.cgcolor);//Wireframe Color Cgcontextaddrect (context,cgrectmake (140, 120, 60, 30);//Draw Box Cgcontextdrawpath (context, kcgpathfillstroke);//painting path//rectangle, and discard gradient color//About color reference http://blog.sina.com.cn/ S/blog_6ec3c9ce01015v3c.html//http://blog.csdn.net/reylen/article/details/8622932//First Fill method, The first way must be to import the class library Quartcore and #import <quartzcore/quartzcore.h&gt, 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];    The second method of filling is 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))    );//The formation of trapezoidal, gradient effect cgcolorspacerelease (RGB); Draw a line to form a rectangle//cgcontextsavegstate and cgcontextrestoregstate action/* The function of the cgcontextsavegstate 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. The way to push and eject is to go back to the previous graphic stateQuick way to avoid undoing all state changes one by one, which 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, follow-up path//cgcontextdrawlineargradient (Cgcontextref context,cggradientref Gradient, Cgpoint startPoint, cgpoint endpoint,cggradientdrawingoptions options)//gradient gradient color, startPoint start position of beginning gradient,                                Endpoint end coordinate, options start coordinate before or start gradient cgcontextdrawlineargradient (context, Gradient,cgpointmake    (220,90), Cgpointmake (240,110), kcggradientdrawsafterendlocation);    Cgcontextrestoregstate (context);//revert to the previous context//and write a 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//white, starting and ending coordinates are the direction and shape of the control gradient cgcontextdrawlineargradient (context, gradient, Cgpointmake (260, Max), Cgpointmake (260,), Kcggradientdra    Wsafterendlocation); Cgcontextrestoregstate (context);//revert to the previous context//below to see a color gradient of the circle cgcontextdrawradialgradient (context, gradient, C        Gpointmake (+), 0.0, cgpointmake (+), kcggradientdrawsbeforestartlocation);    /* Draw sector and Ellipse/////Draw a circle, just set the angle size, form a fan acolor = [Uicolor colorwithred:0 green:1 blue:1 alpha:1]; Cgcontextsetfillcolorwithcolor (context, acolor.cgcolor);//Fill Color//Specify the angle sector cgcontextmovetopoint around the center of the circle with a radius of 10 (context,    160, 180);    Cgcontextaddarc (Context, -60 * pi/180, -120 * pi/180, 1);    Cgcontextclosepath (context); Cgcontextdrawpath (context, kcgpathfillstroke); Draw path//Draw ellipse cgcontextaddellipseinrect (context, CGRectMake (160, 180, 20, 8)); Oval CgcontextDrawPath (context, kcgpathfillstroke);    ] =cgpointmake (130, 220);//coordinates 2 spoints[2] =cgpointmake (130, 160);//coordinates 3 cgcontextaddlines (context, spoints, 3);//Add Line Cgcontextclosepath (context);//seal up Cgcontextdrawpath (context, kcgpathfillstroke);        Draw a path based on coordinates/* Draw a rounded rectangle */float FW = 180;float fh = 280;  Cgcontextmovetopoint (Context, FW, fh-20);  Start coordinates to the right of start cgcontextaddarctopoint (context, FW, FH, FW-20, FH, 10); lower Right 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 a Bezier curve *//Two curve cgcontextmovetopoint (context, 120, 300);//Set the starting point of Path Cgcontextaddquadcurvetopo Int (context,190, 310, 120, 390);//Set Bézier curveControl point coordinate and end point coordinate cgcontextstrokepath (context); Three-time curve function cgcontextmovetopoint (context, 200, 300);//Set the starting point of Path Cgcontextaddcurvetopoint (context,250, 280, 250, 400, 28            0, 300);//Set the control point coordinates and the control point coordinates of the Bezier curve Cgcontextstrokepath (context);    /* Picture */UIImage *image = [UIImage imagenamed:@ "apple.jpg"]; [Image Drawinrect:cgrectmake (60, 340, 20, 20)];//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} @end

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.