04 CALayer下面的几个专用图层的介绍

CALayer下面常用的主要包括以下几个重要的图层

  •  CAShaperLayer 绘制立体贝塞尔曲线,绘制曲线,画圆,做圆角,某个部分圆角
  • CAGradrentLayer 用于做颜色渐变
  • CAReplicatorLayer实现倒影效果
  • CATransformLayer 用于3D结构的层次渲染
  • CAEmitteLayer 用于控制粒子效果

下面对以上一个图层做介绍和使用方式

一、CAShaperLayer的使用

1、绘制线、图形等等

(1)用与绘制立体贝塞尔曲线

使用分两个步骤

1、创建曲线UIBezierPath

2、创建CAShapeLayer画笔 

    // 创建BezierPath
    UIBezierPath *path = [[UIBezierPath alloc]init];
    // 设置开始点
//    [path moveToPoint:CGPointMake(200, 300)];
    // 画个圆
//    [path addArcWithCenter:CGPointMake(300, 300) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
    
    // 设置开始点
    [path moveToPoint:CGPointMake(200, 300)];
    // 画个线
    [path addLineToPoint:CGPointMake(200, 400)];
    
    // 创建CAShapeLayer
    CAShapeLayer *layer = [CAShapeLayer layer];
    // 画笔颜色
    layer.strokeColor = [UIColor yellowColor].CGColor;
    // 填充颜色
    layer.strokeColor = [UIColor redColor].CGColor;
    // 线段宽度
    layer.lineWidth = 2;
    layer.path   = path.CGPath;
    
    // 添加layer
    [self.view.layer addSublayer:layer];

效果图 

(2)结合UIRectCorner画给Layer某个角画成圆角

使用分三个步骤

1、创建UIRectCorner 指定圆角的位置

UIRectCornerTopLeft     = 1 << 0,  左上角
UIRectCornerTopRight    = 1 << 1,  右上角
UIRectCornerBottomLeft  = 1 << 2,  左下角
UIRectCornerBottomRight = 1 << 3,  右下角
UIRectCornerAllCorners  = ~0UL     全部角

2、创建UIBezierPath 曲线

3、创建CAShapeLayer画笔

    UIRectCorner conner1 = UIRectCornerTopLeft|UIRectCornerTopRight;
    
    // 创建BezierPath
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) byRoundingCorners:conner1 cornerRadii:CGSizeMake(200, 200)];
    
    // 创建CAShapeLayer
    CAShapeLayer *layer = [CAShapeLayer layer];
    // 画笔颜色
    layer.strokeColor = [UIColor yellowColor].CGColor;
    
    // 画笔颜色
    layer.strokeColor = [UIColor redColor].CGColor;
    
    // 填充颜色
    layer.fillColor = [UIColor blueColor].CGColor;
    // 线段宽度
    layer.lineWidth = 2;
    layer.path   = path.CGPath;
    
    // 添加layer
    [self.view.layer addSublayer:layer];

效果图

(2)结合UIRectCorner给UIView某个角画成圆角

使用分三个步骤

1、创建UIRectCorner 指定圆角的位置

UIRectCornerTopLeft     = 1 << 0,  左上角
UIRectCornerTopRight    = 1 << 1,  右上角
UIRectCornerBottomLeft  = 1 << 2,  左下角
UIRectCornerBottomRight = 1 << 3,  右下角
UIRectCornerAllCorners  = ~0UL     全部角

2、创建UIBezierPath 曲线

3、创建CAShapeLayer画笔

    //把 view2 的 左下角 和 右下角的直角切成圆角
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(120,100,80,80)];
    view2.backgroundColor = [UIColor redColor];
    [self.view addSubview:view2];
    
    //设置切哪个直角
    //    UIRectCornerTopLeft     = 1 << 0,  左上角
    //    UIRectCornerTopRight    = 1 << 1,  右上角
    //    UIRectCornerBottomLeft  = 1 << 2,  左下角
    //    UIRectCornerBottomRight = 1 << 3,  右下角
    //    UIRectCornerAllCorners  = ~0UL     全部角
    //得到view的遮罩路径
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view2.bounds byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10,10)];
    //创建 layer
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = view2.bounds;
    //赋值
    maskLayer.path = maskPath.CGPath;
    view2.layer.mask = maskLayer;

效果图

二、CAGradrentLayer(颜色渐变)的使用

1、创建 CAGradientLayer

1、给CAGradientLayer 设定颜色colors数组

2、设定渐变的开始startPoint和结束点endPoint,默认左上角(0,0),右下角坐标(1,1),由此来决定渐变的方向

 CAGradientLayer *gradientLayer = [CAGradientLayer layer];

 gradientLayer.frame = CGRectMake(10, 50, 100, 100);

 CGColorRef startColor = [UIColor redColor].CGColor;

 CGColorRef endColor = [UIColor yellowColor].CGColor;

 gradientLayer.colors = @[(__bridge id)startColor,(__bridge id)endColor];

 // 左上角的位置

 gradientLayer.startPoint = CGPointMake(0.5, 0);

 // 右下角的位置

 gradientLayer.endPoint = CGPointMake(0.5, 1);

 [self.view.layer addSublayer:gradientLayer];

效果图如下:

三、CAReplicatorLayer实现倒影效果
   

实现思路:

创建正图像layer,然后实现翻转

发布了79 篇原创文章 · 获赞 42 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/s12117719679/article/details/89532587
04