CAShapeLayer UIBezierPath

CAShapeLayer

我用了两个 UIBezierPath 和 CAShapeLayer 在之前。但几乎每一次与填充对象一起包含在用颜色对路径内。但我希望这次来填充的颜色以外的对象所包含的UIBezierPath 。

我只是写了，并运行下面的简单代码试图让自己熟悉 fillRule 属性：

CAShapeLayer *myLayer = (CAShapeLayer*) self.layer; //size: 320 X 480
UIBezierPath *testPath = [UIBezierPath bezierPathWithOvalInRect:(CGRect){{100, 100}, 100, 100}]; //a simple circle
myLayer.fillRule = kCAFillRuleNonZero; // have tried this as well: kCAFillRuleEvenOdd;
myLayer.path = testPath.CGPath;
myLayer.fillColor = [UIColor whiteColor].CGColor;

但尽管如此内部填充颜色。我想要找出什么是，如何可以在路径外的颜色？如果我使用的 fillRule 错在这里，我想知道是否有其他可以实现这一目标的方法。先谢谢了。

解决方法 1:

主要的问题是你不能真的填补以外的一个形状，因为没有任何泛型方法定义什么意思。你需要做什么是形状的首先绘制路径围绕您，"外部"，然后添加圈子作为子路径。你怎么这取决于您想要使用的填充规则上。EvenOdd 是最简单的方法：

CAShapeLayer *myLayer = (CAShapeLayer*) self.layer;
UIBezierPath *testPath = [UIBezierPath bezierPathWithRect:self.bounds];
[testPath appendPath:[UIBezierPath bezierPathWithOvalInRect:(CGRect){{100, 100}, 100, 100}]];
myLayer.fillRule = kCAFillRuleEvenOdd;
myLayer.path = testPath.CGPath;
myLayer.fillColor = [UIColor whiteColor].CGColor;

非零是有点难度，因为你要强制要将反时针方向，不是为 UIBezierPath 的方便方法中的大多数选项的路径：

CAShapeLayer *myLayer = (CAShapeLayer*) self.layer;
UIBezierPath *testPath = [UIBezierPath bezierPathWithRect:self.bounds];
UIBezierPath *counterClockwise = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:M_PI clockwise:NO];
[counterClockwise appendPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:M_PI endAngle:0 clockwise:NO]];
[testPath appendPath:counterClockwise];
myLayer.fillRule = kCAFillRuleNonZero;
myLayer.path = testPath.CGPath;
myLayer.fillColor = [UIColor redColor].CGColor;

取决于你如何构建您的实际路径它可能不有所作为无论哪种方式。

如果你已经没见过的缠绕规则文件有一些不错的图我认为很有帮助。

之前讲过CALayer动画相关知识,再来看看更加复杂的CAShapeLayer相关的动画知识.

普通CALayer在被初始化时是需要给一个frame值的,这个frame值一般都与给定view的bounds值一致,它本身是有形状的,而且是矩形.

CAShapeLayer在初始化时也需要给一个frame值,但是,它本身没有形状,它的形状来源于你给定的一个path,然后它去取CGPath值,它与CALayer有着很大的区别

 

 

CAShapeLayer有着几点很重要:

1. 它依附于一个给定的path,必须给与path,而且,即使path不完整也会自动首尾相接

2. strokeStart以及strokeEnd代表着在这个path中所占用的百分比

3. CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果

 

 

以下给出如何使用CAShapeLayer

    // 创建一个view
    UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:showView];
    showView.backgroundColor = [UIColor redColor];
    showView.alpha = 0.5;

 

    // 贝塞尔曲线(创建一个圆)
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100 / 2.f, 100 / 2.f)
                                                        radius:100 / 2.f
                                                    startAngle:0
                                                      endAngle:M_PI * 2
                                                     clockwise:YES];

 

    // 创建一个shapeLayer
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame         = showView.bounds;                // 与showView的frame一致
    layer.strokeColor   = [UIColor greenColor].CGColor;   // 边缘线的颜色
    layer.fillColor     = [UIColor clearColor].CGColor;   // 闭环填充的颜色
    layer.lineCap       = kCALineCapSquare;               // 边缘线的类型
    layer.path          = path.CGPath;                    // 从贝塞尔曲线获取到形状
    layer.lineWidth     = 4.0f;                           // 线条宽度
    layer.strokeStart   = 0.0f;
    layer.strokeEnd     = 0.1f;

 

    // 将layer添加进图层
    [showView.layer addSublayer:layer];

 

    // 3s后执行动画操作(直接赋值就能产生动画效果)
    [[GCDQueue mainQueue] execute:^{
        layer.speed       = 0.1;
        layer.strokeStart = 0.5;
        layer.strokeEnd   = 0.9f;
        layer.lineWidth   = 1.0f;
    } afterDelay:NSEC_PER_SEC * 3];

 

    // 给这个layer添加动画效果
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.5f];
    pathAnimation.toValue = [NSNumber numberWithFloat:0.8f];
    [layer addAnimation:pathAnimation forKey:nil]; 

 

 

 

    // 创建一个gradientLayer
    CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
    gradientLayer.frame = showView.bounds;
    [gradientLayer setColors:[NSArray arrayWithObjects:
                               (id)[[UIColor redColor] CGColor],
                               (id)[[UIColor yellowColor] CGColor], nil]];
    [gradientLayer setLocations:@[@0.5,@0.9,@1]];
    [gradientLayer setStartPoint:CGPointMake(0.5, 1)];
    [gradientLayer setEndPoint:CGPointMake(0.5, 0)];

 

 

 

附录:

TestView.h

 

#import <UIKit/UIKit.h>

@interface TestView : UIView

{
    
    CAShapeLayer *layer;
    
}

- (void)strokeStart:(CGFloat)value;
- (void)strokeEnd:(CGFloat)value;

@end

 

TestView.m

#import "TestView.h"

@implementation TestView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        layer = [CAShapeLayer layer];
        layer.frame = self.bounds;
        
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.height / 2.0f,
                                                                               self.frame.size.height / 2.0f)
                                                            radius:self.frame.size.height / 2.f
                                                        startAngle:0
                                                          endAngle:M_PI * 2
                                                         clockwise:YES];
        
        layer.strokeColor   = [UIColor greenColor].CGColor;   // 边缘线的颜色
        layer.fillColor     = [UIColor clearColor].CGColor;   // 闭环填充的颜色
        layer.lineCap       = kCALineCapSquare;               // 边缘线的类型
        layer.path          = path.CGPath;                    // 从贝塞尔曲线获取到形状
        layer.lineWidth     = 1.0f;                           // 线条宽度
        layer.strokeStart   = 0.0f;
        layer.strokeEnd     = 0.0f;
        
        [self.layer addSublayer:layer];
    }
    return self;
}

- (void)strokeStart:(CGFloat)value
{
    layer.speed = 1;
    layer.strokeStart = value;
}

- (void)strokeEnd:(CGFloat)value
{
    layer.speed = 1;
    layer.strokeEnd = value;
}

@end

CAShapeLayer 贝塞尔曲线 不圆   
                                                                         > self.circleLayer.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(size.width/2, size.height/2) radius:size.width/2 startAngle:-M_PI endAngle:M_PI clockwise:YES].CGPath;
            self.circleLayer.fillColor = [UIColor clearColor].CGColor;
            self.circleLayer.strokeColor = self.color.CGColor;
            self.circleLayer.lineWidth = 1.0f;
            self.circleLayer.hidden = YES;

如上，circleLayer是CAShapeLayer，添加贝塞尔曲线的圆路径后展现出来并不圆

给CAShapeLayer设置边框颜色为透明色   
                         
                                                
给CAShapeLayer设置边框颜色为透明色得时候，不起作用，具体使用代码如下:
CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    
    layer.fillColor = [[UIColor redColor] CGColor];
    layer.strokeColor = [[UIColor clearColor] CGColor];
    layer.lineWidth = spacing*40;
    layer.borderColor = [UIColor clearColor].CGColor;
    layer.borderWidth = spacing*40;
    layer.masksToBounds = YES;
    
    [path stroke];
    [path fill];
我使用 UIBezierPath 绘制Path 然后截取不规则的图形，但是我要将多个不规则图形拼凑起来的时候  需要给这些不规则图形设置间距    我使用的方法如下:
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame = self.bounds;
    layer.path = path.CGPath;    
    layer.lineWidth = spacing/2.0;
    layer.fillColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:1].CGColor;
    layer.strokeColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor;
    self.layer.mask = layer;