第一步:
先创建一个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
最后运行显示的结果如下: