iOS 使用 CAShapeLayer 绘制图形

  1. 使用 CAShapeLayer 绘制圆
UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    [self.view addSubview:bgView];
    
    //创建 bezierPath
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(175, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    
    //创建 shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 5;
    shapeLayer.path = path.CGPath;
    
    [bgView.layer addSublayer:shapeLayer];

fillColor 用来控制圆内部的颜色

  1. 绘制火柴人
iOS 使用 CAShapeLayer 绘制图形_第1张图片
火柴人.png

实现代码如下:

UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    [self.view addSubview:bgView];
    
    //创建 bezierPath
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(175, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    [path moveToPoint:CGPointMake(150, 125)];
    [path addLineToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(125, 225)];
    [path moveToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(175, 225)];
    [path moveToPoint:CGPointMake(100, 150)];
    [path addLineToPoint:CGPointMake(200, 150)];
    
    //创建 shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;
    
    [bgView.layer addSublayer:shapeLayer];

lineCap 用来设置绘制开始及结束时的方式,直接结束还是以圆角的方式结束。

  1. 不规则的蒙版
    原图(需要被蒙版的图片):
iOS 使用 CAShapeLayer 绘制图形_第2张图片
原图.png

蒙版图片:

iOS 使用 CAShapeLayer 绘制图形_第3张图片
蒙版图片.png

蒙版后的结果:

iOS 使用 CAShapeLayer 绘制图形_第4张图片
蒙版后的结果.png

相关代码:

UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    [self.view addSubview:bgView];
    
    CGRect rect = CGRectMake(50, 150, 100, 100);
    CGSize radii = CGSizeMake(20, 20);
    UIRectCorner corners = UIRectCornerTopRight | UIRectCornerBottomRight | UIRectCornerBottomLeft;
    //create path
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];
    
    //创建 shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor redColor].CGColor;
    shapeLayer.lineWidth = 1;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = bezierPath.CGPath;

    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 200, 400, 300)];
    imageView.image = [UIImage imageNamed:@"Sprite"];
    [bgView addSubview:imageView];
    
    imageView.layer.mask = shapeLayer;

参考链接

你可能感兴趣的:(iOS 使用 CAShapeLayer 绘制图形)