一、简单图形线条的绘制
1.要想绘制图形要重写
-
(void)drawRect:(CGRect)rect方法
绘图的的思路为
1、首先获取图形上下文
2、设置绘图路径
3、将绘图路径添加到图形上下文
4、渲染图形上下文
1.1线段的简单绘制// 首先获取图形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 设置绘图信息(拼接路径) UIBezierPath *path = [UIBezierPath bezierPath]; // 设置起点 [path moveToPoint:CGPointMake(10, 10)]; // 设置终点 [path addLineToPoint:CGPointMake(100, 10)]; // 再画一条先，线的终点是下个线段的起点 [path addLineToPoint:CGPointMake(100, 100)]; // 把路径添加上下文 CGContextAddPath(ctx, path.CGPath); // 渲染上下文 Stroke是描边的意思 CGContextStrokePath(ctx);
注意：在实际的开发过程中一般是一个线段对应一个路径
1.2、绘制有颜色和宽度的两条线段
// 首先获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 设置绘图信息(拼接路径)
UIBezierPath *path = [UIBezierPath bezierPath];
// 设置起点
[path moveToPoint:CGPointMake(10, 10)];
// 设置终点
[path addLineToPoint:CGPointMake(100, 10)];
UIBezierPath *secPath = [UIBezierPath bezierPath];
[secPath moveToPoint:CGPointMake(100, 100)];
[secPath addLineToPoint:CGPointMake(100, 150)];
// 设置绘图状态
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineWidth(ctx, 15);
// 设置颜色
[[UIColor blueColor] set];
// 把路径添加上下文
CGContextAddPath(ctx, path.CGPath);
CGContextAddPath(ctx, secPath.CGPath);
// 渲染上下文 Stroke是描边的意思
CGContextStrokePath(ctx);
1.3、二次曲线的绘制
// 首先获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 定义路径
// 起点
CGPoint startPoint = CGPointMake(0, 100);
// 终点
CGPoint endPoint = CGPointMake(200, 100);
// 控制点
CGPoint controlPoint = CGPointMake(100, 0);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
// 设置上下文属性
CGContextSetLineWidth(ctx, 10);
CGContextSetLineCap(ctx, kCGLineCapRound);
// 设置颜色
[[UIColor blueColor] set];
// 将路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
// 渲染上下文
CGContextStrokePath(cox);
1.4、绘制三角形
// 获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 描述路径
UIBezierPath *path = [UIBezierPath bezierPath];
// 设置起点
[path moveToPoint:CGPointMake(10, 10)];
[path addLineToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(100, 10)];
// 关闭路径
[path closePath];
// 设置上下文属性
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineWidth(ctx, 10);
[[UIColor blueColor]set];
// 将路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
// 渲染路径
// CGContextStrokePath(ctx); // 描边
CGContextFillPath(ctx); // 填充
1.5、绘制圆弧
// 圆弧的画法
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 重点
CGPoint center = CGPointMake(100, 100);
CGFloat startAngle = 0;
CGFloat endAngle = M_PI_2;
CGFloat radius = 50;
// 注意clockwise为NO为逆时针，为YES时为顺时针
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
// 注意，如果需要画四分之一圆的话需要再添加一个线段到圆心
[path addLineToPoint:center];
[path closePath]; // 关闭路径
CGContextAddPath(ctx, path.CGPath);
[[UIColor blueColor]set];
CGContextStrokePath(ctx);
1.6、绘制饼图
NSArray *percents = @[@25,@25,@50];
// 获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat startAngle = 0;
CGFloat endAnglei = 0;
CGFloat angle = 0;
CGFloat radius = 100;
CGPoint center = CGPointMake(100, 100);
for (NSNumber *percent in percents) {
startAngle = endAnglei;
angle = [percent intValue]/100.0*M_PI*2;
endAnglei = startAngle + angle;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAnglei clockwise:YES];
[path addLineToPoint:center];
CGContextAddPath(ctx, path.CGPath);
[[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1.0] set];
// CGContextStrokePath(ctx);
CGContextFillPath(ctx);
}
1.7、绘制柱状图
NSArray *percents = @[@25,@25,@50];
// 获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat rectW = rect.size.width / (percents.count*2-1);
CGFloat rectH = rect.size.height;
for(int i = 0;i<percents.count;i++){
int num = [percents[i] intValue];
CGFloat height = num/100.0*rectH;
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(2*rectW*i, rectH - height, rectW, height)];
CGContextAddPath(ctx, path.CGPath);
CGContextStrokePath(ctx);
}
1.8、绘制文字和图片
NSString *str = @"hello wordfdfdffffffffffffff";
NSDictionary *dic = @{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName:[UIColor blueColor],NSVerticalGlyphFormAttributeName:@1};
CGRect yjRect = CGRectMake(0, 0, 100, 100);
// [str drawInRect:yjRect withAttributes:dic]; (这个绘制方法会自动换行)
[str drawAtPoint:CGPointZero withAttributes:dic]; （这个不会换行）
注意：画图片方法与这个差不多
1.9、屏幕刷新的定时器
// 屏幕刷新时会调用，的定时器，每秒刷新60次
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];