美文网首页
iOS 使用 CAShapeLayer 绘制图形

iOS 使用 CAShapeLayer 绘制图形

作者: chenyu1520 | 来源:发表于2017-04-11 18:33 被阅读714次
    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. 绘制火柴人
    火柴人.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. 不规则的蒙版
      原图(需要被蒙版的图片):
    原图.png

    蒙版图片:

    蒙版图片.png

    蒙版后的结果:

    蒙版后的结果.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 绘制图形

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