DrawRect基础
哈哈哈哈😆 ------------- 大哥原创
请多多指教 .....................................................
前沿介绍:
Quartz 2D 是一个二维的绘制隐形 同时支持iOS 和 mac 系统 基于<CoreGraphics/>框架来实现
作用: *绘制图形 线 三角形 圆形 弧形等
*绘制文字
*绘制/生成PDF
*截图/裁剪图片
*自定义UI控件
图形上下文 CGContextRef
*保存绘图信息 绘图状态 决定绘制的输出目标
*绘制好的上下文 需要渲染到View上
- (void)drawRect:(CGRect)rect;方法介绍
/*
View能显示 主要是有Layer层
通常使用DrawRect绘制图形
图形上下文只能在这个方法里获取Viewlayer的图形上下文
此方法的实现都是基于C语言的
*此方法是在视图即将出现的时候调用
*注意:drawRect 在通常情况下,只走一次,即视图将要出现之后 不可以手动调用
*[self setNeedsDisplay];
*/
*此方法是在视图即将出现的时候调用
实例演示,直接上代码:
画线
ViewController.m
// // ViewController.m // DrawRect基础 // // Created by dllo on 16/3/30. // Copyright © 2016年 HaiTeng. All rights reserved. // #import "ViewController.h" #import "DrawLine.h" #import "RoundView.h" @interface ViewController () @end @implementation ViewController /* Quartz 2D 是一个二维的绘制隐形 同时支持iOS 和 mac 系统 基于<CoreGraphics/>框架来实现 作用: *绘制图形 线 三角形 圆形 弧形等 *绘制文字 *绘制/生成PDF *截图/裁剪图片 *自定义UI控件 */ /* 图形上下文 CGContextRef *保存绘图信息 绘图状态 决定绘制的输出目标 *绘制好的上下文 需要渲染到View上 */ - (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; NSLog(@"%s",__func__); } - (void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; NSLog(@"%s",__func__); } - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor orangeColor]; DrawLine *lineView = [[DrawLine alloc] initWithFrame:CGRectMake(0, 0, 300, 300)]; lineView.backgroundColor = [UIColor grayColor]; [self.view addSubview:lineView]; NSLog(@"%s",__func__); RoundView *roundView = [[RoundView alloc] initWithFrame:CGRectMake(0, 305, 300, [UIScreen mainScreen].bounds.size.height - 320)]; roundView.backgroundColor = [UIColor greenColor]; [self.view addSubview:roundView]; } @end
DrawLine.h
// // DrawLine.h // DrawRect基础 // // Created by dllo on 16/3/30. // Copyright © 2016年 HaiTeng. All rights reserved. // #import <UIKit/UIKit.h> @interface DrawLine : UIView @end
DrawLine.m
// // DrawLine.m // DrawRect基础 // // Created by dllo on 16/3/30. // Copyright © 2016年 HaiTeng. All rights reserved. // #import "DrawLine.h" @implementation DrawLine /* View能显示 主要是有Layer层 通常使用DrawRect绘制图形 图形上下文只能在这个方法里获取Viewlayer的图形上下文 此方法的实现都是基于C语言的 *此方法是在视图即将出现的时候调用 *注意:drawRect 在通常情况下,只走一次,即视图将要出现之后 不可以手动调用 *[self setNeedsDisplay]; */ - (void)drawRect:(CGRect)rect { //此rect是自己的Bounds NSLog(@"%s %d",__func__,__LINE__); NSLog(@"%@",NSStringFromCGRect(rect)); // [self drawFirstLine]; // [self drawSecondLine]; // [self drawThirdLine]; // [self drawDoubleLine]; // [self drawDoubleSingleline]; [self drawCurve]; } #pragma mark - 第一种方法:画线(最基本的内部实现) - (void)drawFirstLine { //1.获取图形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); //2.描绘路径 CGMutablePathRef path = CGPathCreateMutable(); //起点 CGPathMoveToPoint(path, NULL, 20, 20); //添加一条线到某一个点 CGPathAddLineToPoint(path, NULL, 50, 50); //3.给上下文添加路径 CGContextAddPath(ctx, path); //4.渲染到上下文中 CGContextStrokePath(ctx); } #pragma mark - 第二种方法:画线 - (void)drawSecondLine{ //1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); //2.直接描绘路径的上下文(系统的封装,其实在内部也是根路径画线) CGContextMoveToPoint(ctx, 20, 20); CGContextAddLineToPoint(ctx, 100, 100); //3.渲染 CGContextStrokePath(ctx); } #pragma mark - 第三种方法:画线(最常用的一种) - (void)drawThirdLine{ //贝塞尔曲线 //在UIKit框架中 //1.创建路径 UIBezierPath *path = [UIBezierPath bezierPath]; //2.描绘起点 [path moveToPoint:CGPointMake(150, 150)]; [path addLineToPoint:CGPointMake(200, 200)]; //3.渲染 [path stroke]; } /** 画两条线 */ - (void)drawDoubleLine { //1.获取上下文 CGContextRef context = UIGraphicsGetCurrentContext(); //2.画线 描述路径到上下文 CGContextMoveToPoint(context, 50, 50); CGContextAddLineToPoint(context, 100, 100); CGContextAddLineToPoint(context, 150, 200); //默认下一条线从上一条线的终点开始 CGContextClosePath(context); //关闭路径(闭合路径).可看到一个三角形 // //设置宽度 // CGContextSetLineWidth(context, 50); // //设置线与线的连接方式 // CGContextSetLineJoin(context, kCGLineJoinRound); // CGContextSetLineCap(context, kCGLineCapRound); //设置颜色 [[UIColor redColor] setStroke]; //线的颜色 与渲染的Stoken配合使用 // [[UIColor greenColor] setFill]; //填充颜色 与渲染的fill配合使用 //3.渲染 CGContextStrokePath(context); // CGContextFillPath(context); //填充路径 只能用于闭合路径 } /** 绘制两条独立的线 */ - (void)drawDoubleSingleline{ UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(50, 50)]; [path addLineToPoint:CGPointMake(100, 100)]; path.lineWidth = 10; [[UIColor redColor] set]; [path stroke]; UIBezierPath *pathOne = [UIBezierPath bezierPath]; [pathOne moveToPoint:CGPointMake(20, 250)]; [pathOne addLineToPoint:CGPointMake(100, 220)]; pathOne.lineWidth = 20; [[UIColor whiteColor]set]; [pathOne stroke]; } #pragma mark - 画曲线 - (void)drawCurve{ //1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); //2.设置起点描绘路径 CGContextMoveToPoint(ctx, 50, 50); //画曲线 /* //<#CGFloat cpx#>, <#CGFloat cpy#> 控制点(也就是中间的点) //<#CGFloat x#>, <#CGFloat y#>)最右边的点(尾儿点) */ CGContextAddQuadCurveToPoint(ctx, 75, 5, 100, 50); //3.渲染 CGContextStrokePath(ctx); } @end
画圆
// // RoundView.h // DrawRect基础 // // Created by dllo on 16/3/30. // Copyright © 2016年 HaiTeng. All rights reserved. // #import <UIKit/UIKit.h> @interface RoundView : UIView @end
// // RoundView.m // DrawRect基础 // // Created by dllo on 16/3/30. // Copyright © 2016年 HaiTeng. All rights reserved. // #import "RoundView.h" @implementation RoundView - (void)drawRect:(CGRect)rect { // [self drawRound]; [self drawArc]; } #pragma mark - 画圆 - (void)drawRound { UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:50]; [path fill]; //填充 // [path stroke]; } #pragma mark - 画弧线 - (void)drawArc { /* Center:<#(CGPoint)#> 圆弧的中心点 radius:<#(CGFloat)#> 圆弧的半径 startAngle:<#(CGFloat)#> 起始的角度 ,以原点右侧水平的点为零度 endAngle:<#(CGFloat)#> 结束的角度 clockwise:<#(BOOL)#> clockwise:YES 为顺时针 */ UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES]; [path addLineToPoint:CGPointMake(100, 100)]; [path closePath]; [path fill]; // [path stroke]; }
posted on 2016-03-30 17:59 Hunter_Wang 阅读(358) 评论(0) 编辑 收藏 举报
