需要實(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)
我不太會(huì)描述，直接用網(wǎng)上一張圖來描述的controlPoint的作用
image.png
看見圖你會(huì)發(fā)現(xiàn)，A點(diǎn)是現(xiàn)在的點(diǎn)，C點(diǎn)就是endPoint，也即是結(jié)束的點(diǎn)。
QQ20200924-114045.png
經(jīng)過我不確定是否準(zhǔn)確的測(cè)試，弧形的頂點(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)，所以我們?cè)诿枥L之前要先移動(dòng)到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
