iOS开发 - Quartz2D绘制小黄人

转载自：http://blog.youkuaiyun.com/wangzi11322/article/details/47183095

Quartz2D绘制小黄人

- (void)drawRect:(CGRect)rect
{
  // 1.上下文
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  // 2.身体
  drawBody(ctx, rect);
  // 3.嘴(微笑)
  drawMouth(ctx, rect);
  // 4.画眼睛
  drawEyes(ctx, rect);
}
/**
 *  眼睛
 */
void drawEyes(CGContextRef ctx, CGRect rect)
{
  // 1.黑色绑带
  CGFloat startX = rect.size.width * 0.5 - Radius;
  CGFloat startY = TopY;
  CGContextMoveToPoint(ctx, startX, startY);
  CGFloat endX = startX + 2 * Radius;
  CGFloat endY = startY;
  CGContextAddLineToPoint(ctx, endX, endY);
  CGContextSetLineWidth(ctx, 15);
  [[UIColor blackColor] set];
  // 绘制线条
  CGContextStrokePath(ctx);
  // 2.最外圈的镜框
  [ZLColor(61, 62, 66) set];
  CGFloat kuangRadius = Radius * 0.4;
  CGFloat kuangY = startY;
  CGFloat kuangX = rect.size.width * 0.5 - kuangRadius;
  CGContextAddArc(ctx, kuangX, kuangY, kuangRadius, 0, M_PI * 2, 0);
  CGContextFillPath(ctx);
  [ZLColor(61, 62, 66) set];
  CGFloat kuangRadius1 = Radius * 0.4;
  CGFloat kuangY1 = startY;
  CGFloat kuangX1 = rect.size.width * 0.5 + kuangRadius;
  CGContextAddArc(ctx, kuangX1, kuangY1, kuangRadius1, 0, M_PI * 2, 0);
  CGContextFillPath(ctx);
  // 3.里面的白色框
  [[UIColor whiteColor] set];
  CGFloat whiteRadius = kuangRadius * 0.7;
  CGFloat whiteX = kuangX;
  CGFloat whiteY = kuangY;
  CGContextAddArc(ctx, whiteX, whiteY, whiteRadius, 0, M_PI * 2, 0);
  CGContextFillPath(ctx);
  [[UIColor whiteColor] set];
  CGFloat whiteRadius1 = kuangRadius * 0.7;
  CGFloat whiteX1 = kuangX+2*kuangRadius;
  CGFloat whiteY1 = kuangY;
  CGContextAddArc(ctx, whiteX1, whiteY1, whiteRadius1, 0, M_PI * 2, 0);
  CGContextFillPath(ctx);
  //4.棕色眼球
  [ZLColor(76, 23, 13) set];
  CGFloat brownRadius = kuangRadius * 0.4;
  CGFloat brownX = kuangX+2*kuangRadius-6;
  CGFloat brownY = kuangY;
  CGContextAddArc(ctx, brownX, brownY, brownRadius, 0, M_PI*2 , 0);
  CGContextFillPath(ctx);
  [ZLColor(76, 23, 13) set];
  CGFloat brownRadius1 = kuangRadius * 0.4;
  CGFloat brownX1 = kuangX+6;
  CGFloat brownY1 = kuangY;
  CGContextAddArc(ctx, brownX1, brownY1, brownRadius1, 0, M_PI*2, 0);
  CGContextFillPath(ctx);
  //5.黑色瞳孔
  [[UIColor blackColor] set];
  CGFloat blackRadius = kuangRadius * 0.2;
  CGFloat blackX = kuangX+2*kuangRadius-6;
  CGFloat blackY = kuangY;
  CGContextAddArc(ctx, blackX, blackY, blackRadius, 0, M_PI*2 , 0);
  CGContextFillPath(ctx);
  [[UIColor blackColor] set];
  CGFloat blackRadius1 = kuangRadius * 0.2;
  CGFloat blackX1 = kuangX+6;
  CGFloat blackY1 = kuangY;
  CGContextAddArc(ctx, blackX1, blackY1, blackRadius1, 0, M_PI*2, 0);
  CGContextFillPath(ctx);
  //6.白色反光
  [[UIColor whiteColor] set];
  CGFloat lightRadius = kuangRadius * 0.1;
  CGFloat lightX = kuangX+2*kuangRadius;
  CGFloat lightY = kuangY;
  CGContextAddArc(ctx, lightX, lightY, lightRadius, 0, M_PI*2 , 0);
  CGContextFillPath(ctx);
  [[UIColor whiteColor] set];
  CGFloat lightRadius1 = kuangRadius * 0.1;
  CGFloat lightX1 = kuangX+2*kuangRadius-45;
  CGFloat lightY1 = kuangY;
  CGContextAddArc(ctx, lightX1, lightY1, lightRadius1, 0, M_PI*2 , 0);
  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;
  CGFloat marginY = 10;
  CGFloat currentX = controlX - marginX;
  CGFloat currentY = controlY - marginY;
  CGContextMoveToPoint(ctx, currentX, currentY);
  // 结束点
  CGFloat endX = controlX + marginX;
  CGFloat endY = currentY;
  // 贝塞尔曲线
  CGContextAddQuadCurveToPoint(ctx, controlX, controlY, endX, endY);
  // 设置颜色
  [[UIColor blackColor] set];
  // 渲染
  CGContextStrokePath(ctx);
}
/**
 *  画身体
 */
void drawBody(CGContextRef ctx, CGRect rect)
{
  // 上半圆
  CGFloat topX = rect.size.width * 0.5;
  CGFloat topY = TopY;
  CGFloat topRadius = Radius;
  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);
  // 设置颜色
  [ZLColor(252, 218, 0) set];
  // 利用填充方式画出之前的路径
  CGContextFillPath(ctx);
}

效果图