iOS進階-QuartzCore架構-2D繪圖-執行個體：小黃人

標籤：

#define MJColor（r，g，b） [UIColor colorWithRed：（r）/255.0 green：（g）/255.0 blue：（b）/255.0 alpha：1.0] 

1.自訂一個MJHumanView，繼承自UIView
2.預設View（整一個View）的Class設定為MJHumanView
3.實現drawRect：方法
-（void）drawRect：（CGRect）rect
{
//1.上下文
CGContextRef ctx = UIGraphicsGetCurrentContext（）；

//2.身體
drawBody（ctx，rect）；

//3.嘴（微笑）
drawMouth（ctx，rect）；

//4.畫眼睛
drawEyes（ctx，rect）；
}

二、畫身體
//畫身體
void drawBody（CGContextRef ctx，CGRect rect）
{
//上半圓
CGFloat topX = rect.size.width *0.5；
CGFloat topY = MJTopY；
CGFloat topRadius = MJRadius； //半徑因為經常要用，所以設為宏
CGContextAddArc（ctx，topX，topY，topRadius，0，M_PI，1）；

//向下延伸
CGFloat middleX = topX - topRadius；
CGFloat middleH = 100； //中間的身體長度
CGFloat middleY = topY + middleH；
CGContextAddLineToPoint（ctx，middleX，middleY）；

//下半圓
CGFloat bottomX = topX；
CGFloat bottomY = middleY；
CGFloat bottomRadius = topRadius；
CGContextAddArc（ctx，bottomX，bottomY，bottomRadius，M_PI，0，1）；

//合并路徑
CGContextClosePath（ctx）；

//設定顏色（寫成了宏）
[MJColor（252，218，0） set]；

//利用填充方式畫出之前的路徑
CGContextFillPath（ctx）；
}

三、畫嘴巴
void drawMouth（CGContextRef ctx，CGRect rect）
{
//中間的控制點
CGFloat controlX = rect.size.width * 0.5；
CGFloat controlY = rect.size.height * 0.4；

//當前點
CGFloat marginX = 20；//控制點與2點在X方向上的間距，越大則越長
CGFloat marginY = 10；//控制點與2點在Y方向上的間距，越大則越尖
CGFloat currentX = controlX - marginX；
CGFloat currentY = controlY - marginY；
CGContextMoveToPoint（ctx，currentX，currentY）；

//結束點
CGFloat endX = controlX + marginX；
CGFloat endY = currentY；

//貝茲路徑
CGContextAddQuadCurveToPoint（controlX，controlY，endX，endY）；

//設定顏色
[[UIColor blackColor] set]；
//渲染
CGContextStrokePath（ctx）；
}

四、畫眼睛
void drawEyes（CGContextRef ctx，CGRect rect）
{
//1.畫黑色綁帶
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]；
//繪製線條
CGontextStrokePath(ctx);

//2.畫最外圈的鏡框
[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.畫裡面的白色框
[[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：眼珠同理
}

iOS進階-QuartzCore架構-2D繪圖-執行個體：小黃人