用Quartz 2D画小黄人

第一步:

      先创建一个OneView类,并在storyboard里边拖拽一个UIview,将这个UIview的类改成OneView。如图所示:

     

第二步:

     在新创建的Oneview里,补齐下列代码:

  1 //
  2 //  OneView.m
  3 //  03-drawImage
  4 //
  5 //  Created by jerry on 15/7/20.
  6 //  Copyright (c) 2015年 jerry. All rights reserved.
  7 //
  8 
  9 #import "OneView.h"
 10 
 11 @implementation OneView
 12 
 13 -(void)drawRect:(CGRect)rect
 14 {
 15     // [self drawImage];
 16     [self drawYellowPop:rect];
 17 }
 18 //
 19 -(void)drawYellowPop:(CGRect)rect
 20 {
 21     // 先获取图片上下文对象
 22     CGContextRef ctx = UIGraphicsGetCurrentContext();
 23     // 设置头及颜色
 24     [self setHeaderWithCGContextRef:ctx andRect:rect];
 25     
 26     [self setMouthWith:ctx andRect:rect];
 27     
 28     [self setGlassesWith:ctx andRect:rect];
 29     
 30     [self setHairWith:ctx andRect:rect];
 31     
 32 }
 33 /**
 34  *   画嘴
 35  *
 36  *  @param ctx  <#ctx description#>
 37  *  @param rect <#rect description#>
 38  */
 39 -(void)setMouthWith:(CGContextRef)ctx andRect:(CGRect)rect
 40 {
 41     // 设置中间点
 42     CGFloat CenterX = rect.size.width * 0.5;
 43     CGFloat CenterY = rect.size.width * 0.5;
 44     
 45     // 设置当前点
 46     CGFloat marginX = 30;
 47     CGFloat marginY = 20;
 48     CGFloat currenX = CenterX - marginX;
 49     CGFloat currenY = CenterY - marginY;
 50     CGContextMoveToPoint(ctx, currenX, currenY);
 51     
 52     // 结束点
 53     CGFloat endX = CenterX + marginX;
 54     CGFloat endY = currenY;
 55     // 贝塞尔曲线
 56     CGContextAddQuadCurveToPoint(ctx, CenterX, CenterY, endX, endY);
 57     
 58     // 设置颜色
 59     [[UIColor blackColor]set];
 60     // 渲染
 61     CGContextStrokePath(ctx);
 62 }
 63 // 设置眼镜
 64 -(void)setGlassesWith:(CGContextRef)ctx andRect:(CGRect)rect
 65 {
 66     CGFloat LineX = rect.size.width * 0.5 - 70;  // 减半径
 67     CGFloat LineY = 100;
 68     // 画一条黑线
 69     CGContextMoveToPoint(ctx,LineX , LineY);
 70     // 结束点
 71     CGFloat EndLineX = LineX + 2 * 70;
 72     CGFloat EndLineY = LineY;
 73     CGContextAddLineToPoint(ctx,EndLineX, EndLineY);
 74     CGContextSetLineWidth(ctx, 20);
 75     [[UIColor blackColor]set];
 76     CGContextStrokePath(ctx);
 77     
 78     // 2.画眼
 79     // 注释:画眼就是画圆
 80     CGFloat leftEyesY = LineY;
 81     CGFloat leftEyesRadius = 30;
 82     CGFloat leftEyesX = rect.size.width *0.5 - leftEyesRadius;
 83     CGFloat leftEyesStartAngle = 0;
 84     CGFloat leftEyesEndAngle = M_PI * 2;
 85     [[UIColor redColor]set];
 86     CGContextAddArc(ctx, leftEyesX, leftEyesY, leftEyesRadius, leftEyesStartAngle, leftEyesEndAngle, 0);
 87     CGContextFillPath(ctx);
 88     
 89     CGFloat rightEyesX = leftEyesX + leftEyesRadius * 2;
 90     CGFloat rightEyesY = leftEyesY;
 91     CGFloat rightEyesSstartAngle = 0;
 92     CGFloat rightEyesRadius = leftEyesRadius;
 93     CGFloat rightEyesEndAngle = leftEyesEndAngle;
 94     CGContextAddArc(ctx, rightEyesX, rightEyesY, rightEyesRadius, rightEyesSstartAngle, rightEyesEndAngle, 0);
 95     [[UIColor redColor]set];
 96     CGContextFillPath(ctx);
 97     
 98     // 镜片
 99     CGFloat leftGlassesRadius = 20;
100     CGFloat leftGlassesX = leftEyesX;
101     CGFloat leftGlassesY = LineY;
102     CGContextAddArc(ctx, leftGlassesX, leftGlassesY, leftGlassesRadius, 0, M_PI * 2, 0);
103     
104     
105     
106     CGFloat rightGlassesRadius = leftGlassesRadius;
107     CGFloat rightGlassesX = rightEyesX;
108     CGFloat rightGlassesY = LineY;
109     CGContextAddArc(ctx, rightGlassesX, rightGlassesY, rightGlassesRadius,0, M_PI * 2 , 0);
110     [[UIColor whiteColor]set];
111     CGContextFillPath(ctx);
112     
113     
114     // 眼睛珠
115     CGFloat leftZhuRadius = 10;
116     CGFloat leftZhuY = LineY;
117     CGFloat leftZhuX = leftGlassesX +5;
118     CGContextAddArc(ctx, leftZhuX, leftZhuY, leftZhuRadius, 0, M_PI * 2, 0);
119     
120     
121     CGFloat rightZhuRadius = leftZhuRadius;
122     CGFloat rightZhuY = LineY;
123     CGFloat rightZhuX = rightGlassesX - 5;
124     CGContextAddArc(ctx, rightZhuX, rightZhuY, rightZhuRadius, 0, M_PI * 2, 0);
125     
126     [[UIColor colorWithRed:89/255.0 green:19/255.0 blue:13/255.0 alpha:1]set];
127     CGContextFillPath(ctx);
128     
129     // 左瞳孔
130     CGFloat  leftTongRadius = 5;
131     CGFloat  leftTongY = leftZhuY;
132     CGFloat  leftTontX = leftZhuX;
133     CGContextAddArc(ctx, leftTontX, leftTongY, leftTongRadius, 0, M_PI * 2, 0);
134     
135     
136     // 右瞳孔
137     CGFloat rightTongRadius = leftTongRadius;
138     CGFloat rightTongX = rightZhuX;
139     CGFloat rightTongY = rightZhuY;
140     CGContextAddArc(ctx, rightTongX, rightTongY, rightTongRadius, 0, M_PI *2, 0);
141     [[UIColor colorWithRed:42/255.0 green:6/255.0 blue:2/255.0 alpha:1]set];
142     CGContextFillPath(ctx);
143     
144     // 左聚光
145     CGFloat leftJuRadius = 3;
146     CGFloat leftJuX = leftTontX - 3;
147     CGFloat leftJuY =leftTongY - 3;
148     CGContextAddArc(ctx, leftJuX, leftJuY, leftJuRadius, 0, M_PI * 2, 0);
149    
150     
151     // 右聚光
152     CGFloat rightJuRadius = leftJuRadius;
153     CGFloat rightJuX = rightTongX - 3;
154     CGFloat rightJuY = rightTongY - 3;
155     CGContextAddArc(ctx, rightJuX, rightJuY, rightJuRadius, 0, M_PI *2, 0);
156     [[UIColor whiteColor]set];
157     CGContextFillPath(ctx);
158 }
159 
160 -(void)setHeaderWithCGContextRef:(CGContextRef)ctx andRect:(CGRect)rect
161 {
162     // 画图片
163     CGFloat topX = rect.size.width * 0.5; // 确定x 轴的点
164     CGFloat topY = 100;
165     CGFloat topRadius = 70; // 半径
166     CGFloat topStartAngle = 0; // 起点
167     CGFloat topEndAngle = M_PI;
168     // 0 是顺时针  1 是逆时针
169     CGContextAddArc(ctx, topX, topY, topRadius, topStartAngle, topEndAngle, 1);
170     // 以上一个终点为起点画直线
171     CGFloat leftLineX = topX - topRadius;
172     CGFloat leftLineY = topY + 100;
173     CGContextAddLineToPoint(ctx, leftLineX, leftLineY);
174     
175     CGFloat downX = topX;
176     CGFloat downY = leftLineY;
177     CGContextAddArc(ctx, downX, downY, topRadius,topEndAngle , topStartAngle, 1);
178     // 关闭路径
179     CGContextClosePath(ctx);
180     // 填充背景颜色
181     [[UIColor yellowColor]set];
182     //显示在view
183     CGContextFillPath(ctx);
184 }
185 /**
186  *  设置头发
187  *
188  */
189 - (void)setHairWith:(CGContextRef)ctx andRect:(CGRect)rect
190 {
191     // 第一根头发
192     CGFloat hairStartX = rect.size.width *0.5;
193     CGFloat hairStartY = 2;
194     CGContextMoveToPoint(ctx, hairStartX, hairStartY);
195     CGFloat hairEndX = rect.size.width * 0.5 + 2;
196     CGFloat hairEndY = 30;
197     CGContextAddLineToPoint(ctx, hairEndX, hairEndY);
198     
199     // 第二根头发
200     CGFloat hairTwoStartX = rect.size.width * 0.5 + 20;
201     CGFloat hairTwoStartY = 2;
202     CGContextMoveToPoint(ctx, hairTwoStartX, hairTwoStartY);
203     CGFloat hairTowEndX = rect.size.width * 0.5 + 10;
204     CGFloat hairTowEndY = 30;
205     CGContextAddLineToPoint(ctx, hairTowEndX, hairTowEndY);
206     
207     // 第三根头发
208     CGFloat hairThreeStartX = rect.size.width * 0.5 - 20;
209     CGFloat hairThreeStartY = 2;
210     CGContextMoveToPoint(ctx, hairThreeStartX, hairThreeStartY);
211     CGFloat hairThreeEndX = rect.size.width * 0.5 - 10;
212     CGFloat hairThreeEndY = 33;
213     CGContextAddLineToPoint(ctx, hairThreeEndX, hairThreeEndY);
214     
215     // 第四个头发
216     CGFloat hairFourStartX = rect.size.width * 0.5 - 50;
217     CGFloat hairFourStartY = 2;
218     CGContextMoveToPoint(ctx, hairFourStartX, hairFourStartY);
219     CGFloat hairFourEndX = rect.size.width *0.5 - 35;
220     CGFloat hairFourEndY = 40;
221     CGContextAddLineToPoint(ctx, hairFourEndX, hairFourEndY);
222     
223     // 第五根头发
224     CGFloat hairFiveStartX = rect.size.width * 0.5 + 50;
225     CGFloat hairFiveStartY = 2;
226     CGContextMoveToPoint(ctx, hairFiveStartX, hairFiveStartY);
227     CGFloat hairFiveEndX = rect.size.width * 0.5 + 35;
228     CGFloat hairFiveEndY = 40;
229     CGContextAddLineToPoint(ctx, hairFiveEndX, hairFiveEndY);
230     
231     [[UIColor blackColor]set];
232     CGContextSetLineWidth(ctx, 1);
233     CGContextStrokePath(ctx);
234     
235    
236     
237 }
238 /**
239  *  画图片
240  */
241 -(void)drawImage
242 {
243     // 用oc代码 可以不用获取图形上下文对象
244     UIImage *img = [UIImage imageNamed:@"12"];
245     [img drawAsPatternInRect:CGRectMake(0, 0, 100, 100)];
246     
247 }
248 @end

最后运行显示的结果如下:

posted @ 2015-07-21 18:59  。低调ヽ继续  阅读(538)  评论(1编辑  收藏  举报