iOS開發(fā) 利用UIBezierPath畫弧

需要實(shí)現(xiàn)效果

image.png

方案1：利用方法

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise API_AVAILABLE(ios(4.0));

參數(shù)詳解：
center：弧形的圓心
radius：半徑
startAngle：開始角度
endAngle：結(jié)束角度
clockwise：是否是順時(shí)針方向

使用：

    // 畫圓弧
    CGFloat kViewHeight = 200;
    UIView *showView = [[UIView alloc] initWithFrame:(CGRectMake(0, self.view.frame.size.height-kViewHeight, self.view.frame.size.width, kViewHeight))];
    showView.backgroundColor = UIColor.grayColor;
    [self.view addSubview:showView];
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    //畫圓弧 順時(shí)針半圈
    CGFloat kRadius = kViewHeight*3;
    [bezierPath addArcWithCenter:CGPointMake(self.view.frame.size.width/2, kRadius) radius:kRadius startAngle:0 endAngle:-M_PI clockwise:NO];
    [bezierPath closePath];
    //  設(shè)置顏色（顏色設(shè)置也可以放在最上面，只要在繪制前都可以）
    [UIColor.redColor setStroke];
    [UIColor.systemPinkColor setFill];
    // 描邊和填充
    [bezierPath stroke];
    [bezierPath fill];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = bezierPath.CGPath;
    layer.strokeColor = UIColor.redColor.CGColor;
    layer.fillColor = UIColor.greenColor.CGColor;
    layer.backgroundColor = UIColor.systemPinkColor.CGColor;
    [showView.layer addSublayer:layer];

展現(xiàn)效果

image.png

這種方案實(shí)現(xiàn)的優(yōu)點(diǎn)是方便理解原理，弧度的大小可以直接由半徑來決定，缺點(diǎn)是位置控制起來不是很方便植影，圓心還要下移才能固定弧度所在的位置箱锐。

方案二：
這個(gè)是我選擇使用的方案硫椰。

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

參數(shù)詳解：
endPoint：結(jié)束點(diǎn)
controlPoint：控制點(diǎn)
我不太會描述制跟，直接用網(wǎng)上一張圖來描述的controlPoint的作用

image.png

看見圖你會發(fā)現(xiàn)，A點(diǎn)是現(xiàn)在的點(diǎn)仪召，C點(diǎn)就是endPoint寨蹋，也即是結(jié)束的點(diǎn)。

QQ20200924-114045.png

經(jīng)過我不確定是否準(zhǔn)確的測試扔茅，弧形的頂點(diǎn)P大致為B點(diǎn)到直線AC的垂點(diǎn)M的中心點(diǎn)已旧。也就是說，P點(diǎn)為直線BM的中心點(diǎn)召娜。當(dāng)然运褪，也有可能P點(diǎn)不在BM線上，所以準(zhǔn)確點(diǎn)說就是玖瘸，P與BM的垂直交點(diǎn)就是BM的中心點(diǎn)秸讹。

系統(tǒng)提供的該方法中，B和C點(diǎn)都有了但是沒有A點(diǎn)雅倒，所以我們在描繪之前要先移動到A點(diǎn)

[bezierPath moveToPoint: CGPointMake(0, kRadian)]

實(shí)現(xiàn)代碼：

    self.view.backgroundColor = UIColor.systemGray5Color;
    // 畫圓弧
    CGFloat kViewHeight = 200;
    UIView *showView = [[UIView alloc] initWithFrame:(CGRectMake(0, self.view.frame.size.height-kViewHeight, self.view.frame.size.width, kViewHeight))];
    showView.backgroundColor = UIColor.grayColor;
    [self.view addSubview:showView];
    
    CGFloat kRadian = 35;
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(0, kRadian)];
    [bezierPath addQuadCurveToPoint:CGPointMake(self.view.frame.size.width, kRadian) controlPoint:CGPointMake(self.view.frame.size.width/2, -kRadian)];
    [bezierPath addLineToPoint: CGPointMake(self.view.frame.size.width, showView.frame.size.height)];
    [bezierPath addLineToPoint: CGPointMake(0, showView.frame.size.height)];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = bezierPath.CGPath;
    layer.strokeColor = UIColor.clearColor.CGColor;
    layer.fillColor = UIColor.whiteColor.CGColor;
    [showView.layer addSublayer:layer];

實(shí)現(xiàn)效果：

image.png

這種方案實(shí)現(xiàn)的優(yōu)點(diǎn)是 璃诀，弧度的大小可以直接由controlPoint來決定。并且可以通過addLineToPoint來把自己需要的范圍圈起來蔑匣。

我們可以給layer再增加一些陰影效果劣欢，然后把showView 的背景色去掉：

    self.view.backgroundColor = UIColor.systemGray6Color;
    // 畫圓弧
    CGFloat kViewHeight = 200;
    UIView *showView = [[UIView alloc] initWithFrame:(CGRectMake(0, self.view.frame.size.height-kViewHeight, self.view.frame.size.width, kViewHeight))];
    showView.backgroundColor = UIColor.clearColor;
    [self.view addSubview:showView];
    
    CGFloat kRadian = 35;
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(0, kRadian)];
    [bezierPath addQuadCurveToPoint:CGPointMake(self.view.frame.size.width, kRadian) controlPoint:CGPointMake(self.view.frame.size.width/2, -kRadian)];
    [bezierPath addLineToPoint: CGPointMake(self.view.frame.size.width, showView.frame.size.height)];
    [bezierPath addLineToPoint: CGPointMake(0, showView.frame.size.height)];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = bezierPath.CGPath;
    layer.strokeColor = UIColor.clearColor.CGColor;
    layer.fillColor = UIColor.whiteColor.CGColor;
    layer.cornerRadius = 3.0;
    layer.masksToBounds = NO;
    layer.shadowOffset = CGSizeMake(-5, -5); //(0,0)時(shí)是四周都有陰影
    layer.shadowColor = [UIColor grayColor].CGColor;
    layer.shadowOpacity = 0.1;
    [showView.layer addSublayer:layer];

大功告成

image.png