UIBezierPath 和各種 layer 把我玩壞了

發表於2016-11-23

關於UIBezierPath基礎

UIBezierPath物件是CGPathRef資料型別的封裝。path如果是基於向量形狀的，都用直線和曲線段去建立。我們使用直線段去建立矩形和多邊形，使用曲線段去建立弧（arc），圓或者其他複雜的曲線形狀。每一段都包括一個或者多個點，繪圖命令定義如何去詮釋這些點。每一個直線段或者曲線段的結束的地方是下一個的開始的地方。每一個連線的直線或者曲線段的集合成為subpath。一個UIBezierPath物件定義一個完整的路徑包括一個或者多個subpaths。

*** 首先我們需要自定義一個View繼承UIView?,用來繪製曲線 ***
1.建立一個三角形

- (void)drawRect:(CGRect)rect {

    // 1. 建立UIBezierPath物件
    UIBezierPath *path = [UIBezierPath bezierPath];
    // 2. 設定相關屬性
    path.lineWidth = 3.0f;               // 線條寬度
    [[UIColor redColor] set];            // 線條顏色
    path.lineCapStyle = kCGLineCapRound; // 線條拐角
    path.lineJoinStyle = kCGLineCapRound;// 終點處理
    // 3.通過moveToPoint:設定起點
    [path moveToPoint:CGPointMake(200, 200)];
    // 新增line為subPaths
    [path addLineToPoint:(CGPointMake(100, 400))];
    [path addLineToPoint:(CGPointMake(300, 400))];
    [path closePath];
    // 開始繪畫
    [path stroke];
    // 開始繪畫並填充
   //[path fill];

}

- (void)drawRect:(CGRect)rect {

// 1. 建立UIBezierPath物件

UIBezierPath *path = [UIBezierPath bezierPath];

// 2. 設定相關屬性

path.lineWidth = 3.0f; // 線條寬度

[[UIColor redColor] set]; // 線條顏色

path.lineCapStyle = kCGLineCapRound; // 線條拐角

path.lineJoinStyle = kCGLineCapRound;// 終點處理

// 3.通過moveToPoint:設定起點

[path moveToPoint:CGPointMake(200, 200)];

// 新增line為subPaths

[path addLineToPoint:(CGPointMake(100, 400))];

[path addLineToPoint:(CGPointMake(300, 400))];

[path closePath];

// 開始繪畫

[path stroke];

// 開始繪畫並填充

//[path fill];

}

關於stroke和fill的效果圖如下

2.建立矩形,圓形,和一段弧線

- (void)drawRect:(CGRect)rect {

    // 建立矩形
    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:(CGRectMake(50, 100, 100, 100))];
    rectPath.lineWidth = 3.0f;
    [[UIColor redColor] set];
    rectPath.lineCapStyle = kCGLineCapRound;
    rectPath.lineJoinStyle = kCGLineCapRound;
    [rectPath stroke];

    // 建立內切圓
    UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 300, 300, 300)];
    oval.lineWidth = 3.0f;
    [[UIColor greenColor] set];
    oval.lineCapStyle = kCGLineCapRound;
    oval.lineJoinStyle = kCGLineCapRound;
    [oval stroke];

    // 弧線
    CGFloat endAngle = 120 *sinf(M_PI / 180);
    UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:(CGPointMake(300, 100)) radius:100 startAngle:0.0 endAngle:endAngle clockwise:YES];
    arcPath.lineWidth = 5.0f;
    [[UIColor purpleColor] set];
    arcPath.lineCapStyle = kCGLineCapRound;
    arcPath.lineJoinStyle = kCGLineCapRound;
    [arcPath stroke];
}

- (void)drawRect:(CGRect)rect {

// 建立矩形

UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:(CGRectMake(50, 100, 100, 100))];

rectPath.lineWidth = 3.0f;

[[UIColor redColor] set];

rectPath.lineCapStyle = kCGLineCapRound;

rectPath.lineJoinStyle = kCGLineCapRound;

[rectPath stroke];

// 建立內切圓

UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 300, 300, 300)];

oval.lineWidth = 3.0f;

[[UIColor greenColor] set];

oval.lineCapStyle = kCGLineCapRound;

oval.lineJoinStyle = kCGLineCapRound;

[oval stroke];

// 弧線

CGFloat endAngle = 120 *sinf(M_PI / 180);

UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:(CGPointMake(300, 100)) radius:100 startAngle:0.0 endAngle:endAngle clockwise:YES];

arcPath.lineWidth = 5.0f;

[[UIColor purpleColor] set];

arcPath.lineCapStyle = kCGLineCapRound;

arcPath.lineJoinStyle = kCGLineCapRound;

[arcPath stroke];

}

附上效果圖:

CAShapeLayer和CAGradientLayer

CAShapeLayer是一個通過向量圖形而不是bitmap來繪製的圖層子類。可以指定顏色和線寬等屬性，用CGPath來描述繪製的圖形.
CAGradientLayer,蘋果給出的官方描述是:一個可以用來進行繪製##漸變背景色的layer

實戰一:寫一個環形的進度條

1.先通過CAShapeLayer和BezierPath建立一個圓形的進度條出來

- (void)viewDidLoad {
    [super viewDidLoad];

 // 建立曲線,繪製圓形path
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.center.x, self.view.center.y) radius:100 startAngle:M_PI endAngle:-M_PI clockwise:NO];
    // 建立shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = self.view.bounds;// 設定圖層大小
    shapeLayer.path = circlePath.CGPath;// 設定shapeLayer的cgPath
    shapeLayer.opacity = 1.0f;  //設定透明度0~1之間
    shapeLayer.lineCap = kCALineCapRound;//制定線的邊緣是圓形
    shapeLayer.lineWidth = 5.0f; // 設定線寬
    shapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;// 設定線條顏色
    [shapeLayer setFillColor:[UIColor clearColor].CGColor]; // 清楚填充顏色
    [self.view.layer addSublayer:shapeLayer];}

- (void)viewDidLoad {

[super viewDidLoad];

// 建立曲線,繪製圓形path

UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.center.x, self.view.center.y) radius:100 startAngle:M_PI endAngle:-M_PI clockwise:NO];

// 建立shapeLayer

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.frame = self.view.bounds;// 設定圖層大小

shapeLayer.path = circlePath.CGPath;// 設定shapeLayer的cgPath

shapeLayer.opacity = 1.0f; //設定透明度0~1之間

shapeLayer.lineCap = kCALineCapRound;//制定線的邊緣是圓形

shapeLayer.lineWidth = 5.0f; // 設定線寬

shapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;// 設定線條顏色

[shapeLayer setFillColor:[UIColor clearColor].CGColor]; // 清楚填充顏色

[self.view.layer addSublayer:shapeLayer];}

效果圖⬇️

2.建立CAGradientLayer設定漸變顏色

// 建立顏色陣列
    NSMutableArray *colors = [NSMutableArray array];
    for (NSInteger hue = 0; hue <= 360; hue += 5)
    {
        UIColor * color = [UIColor colorWithHue:1.0 * hue / 360
                                     saturation:1.0
                                     brightness:1.0
                                          alpha:1.0];
        [colors addObject:(id)[color CGColor]];
    }


    CAGradientLayer *grandient = [CAGradientLayer layer];
    grandient.frame = self.view.bounds;//設定顏色漸變的layer的frame
    grandient.colors = colors;//顏色陣列
    grandient.mask = shapeLayer;//設定mask圖層
    //開始和結束點可以用來做隱式動畫
    grandient.startPoint = CGPointMake(0, 0);//開始點
    grandient.endPoint = CGPointMake(1, 0);//結束點
    [self.view.layer addSublayer:grandient];

// 建立顏色陣列

NSMutableArray *colors = [NSMutableArray array];

for (NSInteger hue = 0; hue <= 360; hue += 5)

{

UIColor * color = [UIColor colorWithHue:1.0 * hue / 360

saturation:1.0

brightness:1.0

alpha:1.0];

[colors addObject:(id)[color CGColor]];

}

CAGradientLayer *grandient = [CAGradientLayer layer];

grandient.frame = self.view.bounds;//設定顏色漸變的layer的frame

grandient.colors = colors;//顏色陣列

grandient.mask = shapeLayer;//設定mask圖層

//開始和結束點可以用來做隱式動畫

grandient.startPoint = CGPointMake(0, 0);//開始點

grandient.endPoint = CGPointMake(1, 0);//結束點

[self.view.layer addSublayer:grandient];

效果圖⬇️

關於隱式動畫
shapeLayer.strokeStart =0.f;
shapeLayer.strokeEnd = 0.f;
__block CGFloat end = 0.0f;
 [NSTimer scheduledTimerWithTimeInterval:0.2 repeats:YES block:^(NSTimer * _Nonnull timer) {
        end += 0.1f;
        if (end >= 1) {
            [timer invalidate];
        }
        shapeLayer.strokeEnd = end;
    }];