美文网首页APP & program
iOS动画 —— 自定义View

iOS动画 —— 自定义View

作者: iOS_修心 | 来源:发表于2022-05-09 16:35 被阅读0次

创建路径

1.使用CGContextRef创建,如CGContextAddArc

这种方式是直接对图形上下文进行操作,常用的方法有:
之前的讲解文章:https://www.jianshu.com/p/f2841b6b9260

   CGContextBeginPath //开始画路径
   CGContextMoveToPoint //移动到某一点
   CGContexAddLineToPoint //画直线
   CGContexAddCurveToPoint //画饼图
   CGContexAddEllipseInRect //画椭圆
   CGContexAddArc //画圆
   CGContexAddRect //画方框
   CGContexClosePath //封闭当前路径

2.使用CGPathRef创建,如CGPathAddArc

使用方法一绘制路径后将清空图形上下文,如果我们想保存路径来复用,可以使用Quartz提供的CGPath函数集合来创建可复用的路径对象。

   CGPathCreateMutable
   CGPathMoveToPoint
   CGPathAddLineToPoint
   CGPathAddCurveToPoint
   CGPathAddEllipseInRect
   CGPathAddArc
   CGPathAddRect
   CGPathCloseSubpath 

这些函数和上面方法一的一一对应,可代替之使用。

3.使用UIBezierPath创建,如bezierPathWithOvalInRect

UIBezierPath存在于UIKit中,是对路径绘制的封装,和CGContextRef类似,优点是更面向对象,我们可以像操作普通对象一样对其进行操作。
  在自定义View的时候,一般使用UIBezierPath来创建路径就能基本满足我们的需求,推荐使用。
之前的讲解文章:https://www.jianshu.com/p/fc5a1e0372fa

- (void)drawRect:(CGRect)rect // 重写drawRect方法
{
   // 1.初始化图形相应的UIBezierPath对象
   UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 200, 200)]; // 2.
   // 2.设置一些修饰属性 
   aPath.lineWidth = 8.0;
   //路径的终点形状,
   aPath.lineCapStyle = kCGLineCapRound; 
   //路径的连接点形状
   aPath.lineJoinStyle = kCGLineCapRound; 
   UIColor *color = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1];
   [color set]; 

   // 3.起点
   [aPath moveToPoint:CGPointMake(20, 20)];

   // 4.绘制线条
   [aPath addLineToPoint:CGPointMake(100, 100)];

   [aPath stroke]; // 渲染,完成绘制
}

绘图的核心步骤

  1. 获取上下文
  2. 绘制路径
  3. 添加路径到上下文
  4. 修改图形状态参数
  5. 渲染上下文
演示其实现步骤
1. 使用CGContextRef创建路径
 //获取上下文
 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创建路径
 //获取上下文
 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创建路径
 //创建路径
 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];

自定义view的步骤

步骤一:新建一个类,继承UIView类。
步骤二:重载drawRect方法,在这个方法中进行绘图。
  1. 新建CircleView类,继承UIView类
  2. 在CircleView.m中重载drawRect方法
 - (void)drawRect:(CGRect)rect {

 }
  1. 画一个圆
- (void)drawRect:(CGRect)rect {
    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];
}
  1. 创建CircleView的实例添加到视图中
 - (void)viewDidLoad {
     [super viewDidLoad];
     CircleView * cricleView = [[CircleView alloc]initWithFrame:self.view.bounds];
     [self.view addSubview:cricleView];
 }
  1. 效果图


相关文章

网友评论

    本文标题:iOS动画 —— 自定义View

    本文链接:https://www.haomeiwen.com/subject/dsbhurtx.html