IOS绘图的核心步骤

Posted 2020-07-07 郭晓倩

在view上绘制一个图形的方式有很多种，表现形式可能不一样，但其实质步骤都是一样的：

1）获取上下文

2）绘制路径

3）添加路径到上下文

4）修改图形状态参数

5）渲染上下文

下面我们以画一个圆形来演示其实现步骤：

1）使用CGContextRef创建路径

1 2 3 4 5 6 7 8 9

//获取上下文  CGContextRef ctx = UIGraphicsGetCurrentContext();  //绘制路径: 圆形(中心坐标200、200、半径100、起点弧度0、终点弧度2PI、画的方向0逆1正)  CGContextAddArc(ctx, 200, 200, 100, 0, M_PI * 2, 0);  //修改图形状态参数  CGContextSetRGBStrokeColor(ctx, 0.5, 0.5, 0.9, 1.0);//笔颜色  CGContextSetLineWidth(ctx, 10);//线条宽度  //渲染上下文  CGContextStrokePath(ctx);

2）使用CGPathRef创建路径

1 2 3 4 5 6 7 8 9 10 11 12 13

//获取上下文  CGContextRef ctx = UIGraphicsGetCurrentContext();  //创建可变路径  CGMutablePathRef path = CGPathCreateMutable();  //添加圆形到路径中(所在路径、不进行变换操作、中心坐标200、200、起点弧度0、终点弧度2PI、画的方向0逆1正)  CGPathAddArc(path, NULL, 200, 200, 100, 0, M_PI * 2, 1);  //将路径添加到上下文  CGContextAddPath(ctx, path);  //修改图形状态参数  CGContextSetRGBStrokeColor(ctx, 0.5, 0.5, 0.9, 1.0);//笔颜色  CGContextSetLineWidth(ctx, 10);//线条宽度  //渲染上下文  CGContextStrokePath(ctx);

3）使用UIBezierPath创建路径

1 2 3 4 5 6 7

//创建路径  UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 200)];  //修改图形状态参数  [[UIColor colorWithRed:0.5 green:0.5 blue:0.9 alpha:1.0] setStroke];//笔颜色  [path setLineWidth:10];//线条宽度  //渲染  [path stroke];

以上三种方式都可以实现绘制，通过比较我们可以发现使用UIBezierPath创建路径的形式是最简洁且最直观的，推荐使用UIBezierPath，在以后的动画中我们也将更多地应用UIBezierPath到动画的实现中。