iOS关于CAShapeLayer与UIBezierPath的知识内容

来源：互联网发布：win7 java 编辑：程序博客网时间：2024/05/16 16:07

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形。

1：UIBezierPath： UIBezierPath是在 UIKit 中的一个类，继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。使用此类可以定义常见的圆形、多边形等形状。我们使用直线、弧（arc）来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

2：CAShapeLayer： CAShapeLayer顾名思义，继承于CALayer。每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。普通的CALayer是矩形，所以需要frame属性。CAShapeLayer初始化时也需要指定frame值，但它本身没有形状，它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。

实例1：画一个圆形

- (void)viewDidLoad {    [super viewDidLoad];         //创建出CAShapeLayer    self.shapeLayer = [CAShapeLayer layer];    self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置    self.shapeLayer.position = self.view.center;    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor         //设置线条的宽度和颜色    self.shapeLayer.lineWidth = 1.0f;    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;         //创建出圆形贝塞尔曲线    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];         //让贝塞尔曲线与CAShapeLayer产生联系    self.shapeLayer.path = circlePath.CGPath;         //添加并显示    [self.view.layer addSublayer:self.shapeLayer];}

现在我们要用到CAShapeLayer的两个参数，strokeEnd和strokeStart

Stroke:用笔画的意思

在这里就是起始笔和结束笔的位置

Stroke为1的话就是一整圈，0.5就是半圈，0.25就是1/4圈。以此类推

如果我们把起点设为0，终点设为0.75

//设置stroke起始点

self.shapeLayer.strokeStart = 0;

self.shapeLayer.strokeEnd = 0.75;

实例2：画两个圆，其中一个圆表示进度

//画两个圆形-(void)createBezierPath:(CGRect)mybound{    //外圆    _trackPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width - 0.7)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;        _trackLayer = [CAShapeLayer new];    [self.view.layer addSublayer:_trackLayer];    _trackLayer.fillColor = nil;    _trackLayer.strokeColor=[UIColor grayColor].CGColor;    _trackLayer.path = _trackPath.CGPath;    _trackLayer.lineWidth=5;    _trackLayer.frame = mybound;        //内圆    _progressPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width - 0.7)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * 0.7 - M_PI_2 clockwise:YES];        _progressLayer = [CAShapeLayer new];    [self.view.layer addSublayer:_progressLayer];    _progressLayer.fillColor = nil;    _progressLayer.strokeColor=[UIColor redColor].CGColor;    _progressLayer.lineCap = kCALineCapRound;    _progressLayer.path = _progressPath.CGPath;    _progressLayer.lineWidth=5;    _progressLayer.frame = mybound;}

实例3：创建一个转动的圆

- (void)viewDidLoad {    [super viewDidLoad];        self.view.backgroundColor=[UIColor whiteColor];        [self circleBezierPath];    //用定时器模拟数值输入的情况    _timer = [NSTimer scheduledTimerWithTimeInterval:0.1                                              target:self                                            selector:@selector(circleAnimationTypeOne)                                            userInfo:nil                                             repeats:YES];}-(void)circleBezierPath{    //创建出CAShapeLayer    self.shapeLayer = [CAShapeLayer layer];    self.shapeLayer.frame = CGRectMake(0, 0, 150, 150);    self.shapeLayer.position = self.view.center;    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;        //设置线条的宽度和颜色    self.shapeLayer.lineWidth = 2.0f;    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;        //设置stroke起始点    self.shapeLayer.strokeStart = 0;    self.shapeLayer.strokeEnd = 0;        //创建出圆形贝塞尔曲线    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 150, 150)];        //让贝塞尔曲线与CAShapeLayer产生联系    self.shapeLayer.path = circlePath.CGPath;        //添加并显示    [self.view.layer addSublayer:self.shapeLayer];}- (void)circleAnimationTypeOne{    if (self.shapeLayer.strokeEnd > 1 && self.shapeLayer.strokeStart < 1) {        self.shapeLayer.strokeStart += 0.1;    }else if(self.shapeLayer.strokeStart == 0){        self.shapeLayer.strokeEnd += 0.1;    }        if (self.shapeLayer.strokeEnd == 0) {        self.shapeLayer.strokeStart = 0;    }        if (self.shapeLayer.strokeStart == self.shapeLayer.strokeEnd) {        self.shapeLayer.strokeEnd = 0;    }}- (void)circleAnimationTypeTwo{    CGFloat valueOne = arc4random() % 100 / 100.0f;    CGFloat valueTwo = arc4random() % 100 / 100.0f;        self.shapeLayer.strokeStart = valueOne < valueTwo ? valueOne : valueTwo;    self.shapeLayer.strokeEnd = valueTwo > valueOne ? valueTwo : valueOne;}

实例4：通过点画线组成一个五边线

//画一个五边形-(void)fiveAnimation{    UIBezierPath *aPath = [UIBezierPath bezierPath];    //开始点 从上左下右的点    [aPath moveToPoint:CGPointMake(100,100)];    //划线点    [aPath addLineToPoint:CGPointMake(60, 140)];    [aPath addLineToPoint:CGPointMake(60, 240)];    [aPath addLineToPoint:CGPointMake(160, 240)];    [aPath addLineToPoint:CGPointMake(160, 140)];    [aPath closePath];    //设置定点是个5*5的小圆形（自己加的）    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100-5/2.0, 0, 5, 5)];    [aPath appendPath:path];        CAShapeLayer *shapelayer = [CAShapeLayer layer];    //设置边框颜色    shapelayer.strokeColor = [[UIColor redColor]CGColor];    //设置填充颜色 如果只要边 可以把里面设置成[UIColor ClearColor]    shapelayer.fillColor = [[UIColor blueColor]CGColor];    //就是这句话在关联彼此（UIBezierPath和CAShapeLayer）：    shapelayer.path = aPath.CGPath;    [self.view.layer addSublayer:shapelayer];}

实例5：画一条虚线

//画一条虚线-(void)createDottedLine{    CAShapeLayer *shapeLayer = [CAShapeLayer layer];    [shapeLayer setBounds:self.view.bounds];    [shapeLayer setPosition:self.view.center];    [shapeLayer setFillColor:[[UIColor clearColor] CGColor]];        // 设置虚线颜色为blackColor    [shapeLayer setStrokeColor:[[UIColor colorWithRed:223/255.0 green:223/255.0 blue:223/255.0 alpha:1.0f] CGColor]];        // 3.0f设置虚线的宽度    [shapeLayer setLineWidth:1.0f];    [shapeLayer setLineJoin:kCALineJoinRound];        // 3=线的宽度 1=每条线的间距    [shapeLayer setLineDashPattern:    [NSArray arrayWithObjects:[NSNumber numberWithInt:3],      [NSNumber numberWithInt:1],nil]];        // Setup the path    CGMutablePathRef path = CGPathCreateMutable();    CGPathMoveToPoint(path, NULL, 0, 89);    CGPathAddLineToPoint(path, NULL, 320,89);        [shapeLayer setPath:path];    CGPathRelease(path);        // 可以把self改成任何你想要的UIView, 下图演示就是放到UITableViewCell中的    [[self.view layer] addSublayer:shapeLayer];}

实例6：画一个弧线

//画一个弧线-(void)createCurvedLine{    UIBezierPath* aPath = [UIBezierPath bezierPath];    aPath.lineWidth = 5.0;    aPath.lineCapStyle = kCGLineCapRound; //线条拐角    aPath.lineJoinStyle = kCGLineCapRound; //终点处理    [aPath moveToPoint:CGPointMake(20, 100)];    [aPath addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 0)];        self.CurvedLineLayer=[CAShapeLayer layer];    self.CurvedLineLayer.path=aPath.CGPath;    [self.view.layer addSublayer:self.CurvedLineLayer];}

1 0