#define MJCOLOR (r,g,b) [Uicolor colorwithred: (r)/255.0 Green: (g)/255.0 Blue: (b)/255.0 alpha:1.0]
1. Customize a Mjhumanview, inherit from UIView
2. The default view (whole view) class is set to Mjhumanview
3. Implementing DrawRect: Methods
-(void) DrawRect: (cgrect) rect
{
1. Context
Cgcontextref CTX = Uigraphicsgetcurrentcontext ();
2. Body
Drawbody (Ctx,rect);
3. Mouth (smile)
Drawmouth (Ctx,rect);
4. Draw Your Eyes
Draweyes (Ctx,rect);
}
Second, draw the body
Painting the body
void Drawbody (Cgcontextref ctx,cgrect rect)
{
Upper Semicircle
CGFloat TopX = Rect.size.width *0.5;
CGFloat topy = mjtopy;
CGFloat Topradius = Mjradius;//RADIUS is set to macro because it is often used
Cgcontextaddarc (ctx,topx,topy,topradius,0,m_pi,1);
Extend downward
CGFloat Middlex = Topx-topradius;
CGFloat Middleh = 100;//Body length in the middle
CGFloat Middley = topy + Middleh;
Cgcontextaddlinetopoint (Ctx,middlex,middley);
Lower semicircle
CGFloat bottomx = TopX;
CGFloat bottomy = Middley;
CGFloat Bottomradius = Topradius;
Cgcontextaddarc (ctx,bottomx,bottomy,bottomradius,m_pi,0,1);
Merge paths
Cgcontextclosepath (CTX);
Set the color (as a macro)
[Mjcolor (252,218,0) set];
Draw the previous path using the Fill method
Cgcontextfillpath (CTX);
}
Three, draw the mouth
void Drawmouth (Cgcontextref ctx,cgrect rect)
{
The middle Control point
CGFloat CONTROLX = rect.size.width * 0.5;
CGFloat controly = rect.size.height * 0.4;
Current Point
CGFloat Marginx = 20;//Control point and 2 points in the x direction, the larger the longer
CGFloat marginy = 10;//Control point and 2 points in the Y direction, the larger the more sharp
CGFloat currentx = Controlx-marginx;
CGFloat currenty = Controly-marginy;
Cgcontextmovetopoint (Ctx,currentx,currenty);
End point
CGFloat endx = Controlx + Marginx;
CGFloat EndY = currenty;
Bezier curve
Cgcontextaddquadcurvetopoint (Controlx,controly,endx,endy);
Set color
[[Uicolor Blackcolor] set];
Rendering
Cgcontextstrokepath (CTX);
}
Four, draw eyes
void Draweyes (Cgcontextref ctx,cgrect rect)
{
1. Draw a black tie
CGFloat StartX = rect.size.width * 0.5-mjradius;
CGFloat starty = mjtopy;
Cgcontextmovetopoint (Ctx,startx,starty);
CGFloat endx = Start +2 * Mjradius;
CGFloat EndY = starty;
Cgcontextaddlinetopoint (Ctx,endx,endy);
Cgcontextsetlinewidth (ctx,15);
[[Uicolor Blackcolor] set];
Draw lines
Cgontextstrokepath (CTX);
2. Draw the most bezel frame
[Mjcolor (61,62,66) set];
CGFloat Frameradius = Mjradius * 0.4;
CGFloat Framey = starty;
CGFloat FrameX = rect.size.width * 0.5-mjradius;
Cgcontextaddarc (CTX,FRAMEX,FRAMEY,FRAMERADIUS,0,M_PI * 2,0);
Cgcontextfillpath (CTX);
3. The white box inside the picture
[[Uicolor Whitecolor] set];
CGFloat Whiteradius = Frameradius * 0.7;
CGFloat whitey = Framey;
CGFloat Whitex =framex;
Cgcontextaddarc (CTX,WHITEX,WHITEY,WHITERADIUS,0,M_PI * 2,0);
Cgcontextfillpath (CTX);
PS: The same with eyeballs
}
iOS Advanced-quartzcore Framework -2d Drawing-Example: small yellow