一、画线段
1 - (void)drawRect:(CGRect)rect 2 { 3 // Drawing code 4 // 1.获得图形上下文 5 CGContextRef ctx = UIGraphicsGetCurrentContext(); 6 7 // 2.拼接图形(路径) 8 // 设置线段宽度 9 CGContextSetLineWidth(ctx, 10);10 11 // 设置线段头尾部的样式12 CGContextSetLineCap(ctx, kCGLineCapRound);13 14 // 设置线段转折点的样式15 CGContextSetLineJoin(ctx, kCGLineJoinRound);16 17 18 /** 第1根线段(红色) **/19 // 设置颜色20 CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);21 // 设置一个起点22 CGContextMoveToPoint(ctx, 10, 10);23 // 添加一条线段到(100, 100)24 CGContextAddLineToPoint(ctx, 100, 100);25 26 // 3.渲染显示到view上面(渲染一次)27 CGContextStrokePath(ctx);28 29 //------------------------30 31 /** 第2根线段(蓝色) **/32 // 设置颜色33 CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);34 // 设置一个起点35 CGContextMoveToPoint(ctx, 200, 190);36 // 添加一条线段到(150, 40)37 CGContextAddLineToPoint(ctx, 150, 40);38 CGContextAddLineToPoint(ctx, 120, 60);39 40 41 // 3.渲染显示到view上面42 CGContextStrokePath(ctx);43 }
运行效果:
二、画四边形和三角形
画四边形和三角形,就是利用线段将其连接起来。代码如下:
/** * 画四边形 */void draw4Rect(){ // 1.获得上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画矩形 CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100)); // set : 同时设置为实心和空心颜色 // setStroke : 设置空心颜色 // setFill : 设置实心颜色 [[UIColor whiteColor] set]; // CGContextSetRGBFillColor(ctx, 0, 0, 1, 1); // 3.绘制图形 CGContextFillPath(ctx);}/** * 画三角形 */void drawTriangle(){ // 1.获得上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画三角形 CGContextMoveToPoint(ctx, 0, 0); CGContextAddLineToPoint(ctx, 100, 100); CGContextAddLineToPoint(ctx, 150, 80); // 关闭路径(连接起点和最后一个点) CGContextClosePath(ctx); // CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1); // 3.绘制图形 CGContextStrokePath(ctx);}
运行效果:
三、画圆、圆弧、扇形
圆:一个圆圈
圆弧:弧形,非封闭图形。
扇形:比如四分之一圆,利用直线与圆弧组成。
1 - (void)drawRect:(CGRect)rect 2 { 3 // 1.获得上下文 4 CGContextRef ctx = UIGraphicsGetCurrentContext(); 5 6 // 2.画1/4圆 7 CGContextMoveToPoint(ctx, 100, 100); 8 CGContextAddLineToPoint(ctx, 100, 150); 9 CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);10 CGContextClosePath(ctx);11 12 [[UIColor redColor] set];13 14 // 3.显示所绘制的东西15 CGContextFillPath(ctx);16 }17 18 /**19 * 画圆弧20 */21 void drawArc()22 {23 // 1.获得上下文24 CGContextRef ctx = UIGraphicsGetCurrentContext();25 26 // 2.画圆弧27 // x\y : 圆心28 // radius : 半径29 // startAngle : 开始角度30 // endAngle : 结束角度31 // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)32 CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);33 34 35 // 3.显示所绘制的东西36 CGContextFillPath(ctx);37 }38 39 /**40 * 画圆41 */42 void drawCircle()43 {44 // 1.获得上下文45 CGContextRef ctx = UIGraphicsGetCurrentContext();46 47 // 2.画圆48 CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));49 50 CGContextSetLineWidth(ctx, 10);51 52 // 3.显示所绘制的东西53 CGContextStrokePath(ctx);54 }
四、文字、图片
就是将文文字与图片划到view上。
1 void drawImage() 2 { 3 // 1.取得图片 4 UIImage *image = [UIImage imageNamed:@"me"]; 5 6 // 2.画 7 // [image drawAtPoint:CGPointMake(50, 50)]; 8 // [image drawInRect:CGRectMake(0, 0, 150, 150)]; 9 [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];10 11 // 3.画文字12 NSString *str = @"为xxx所画";13 [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];14 }15 16 /**17 * 画文字18 */19 void drawText()20 {21 // 1.获得上下文22 CGContextRef ctx = UIGraphicsGetCurrentContext();23 // 2.画矩形24 CGRect cubeRect = CGRectMake(50, 50, 100, 100);25 CGContextAddRect(ctx, cubeRect);26 // 3.显示所绘制的东西27 CGContextFillPath(ctx);28 29 30 31 // 4.画文字32 NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";33 // [str drawAtPoint:CGPointZero withAttributes:nil];34 35 NSMutableDictionary *attrs = [NSMutableDictionary dictionary];36 // NSForegroundColorAttributeName : 文字颜色37 // NSFontAttributeName : 字体38 attrs[NSForegroundColorAttributeName] = [UIColor redColor];39 attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];40 [str drawInRect:cubeRect withAttributes:attrs];41 }
运行效果: