iOS开发 利用UIBezierPath画弧

需要实现效果

image.png

方案1：利用方法

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

参数详解：
center：弧形的圆心
radius：半径
startAngle：开始角度
endAngle：结束角度
clockwise：是否是顺时针方向

使用：

    // 画圆弧
    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];
    //画圆弧 顺时针半圈
    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];
    //  设置颜色（颜色设置也可以放在最上面，只要在绘制前都可以）
    [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];

展现效果

image.png

这种方案实现的优点是方便理解原理，弧度的大小可以直接由半径来决定，缺点是位置控制起来不是很方便，圆心还要下移才能固定弧度所在的位置。

方案二：
这个是我选择使用的方案。

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

参数详解：
endPoint：结束点
controlPoint：控制点
我不太会描述，直接用网上一张图来描述的controlPoint的作用

image.png

看见图你会发现，A点是现在的点，C点就是endPoint，也即是结束的点。

QQ20200924-114045.png

经过我不确定是否准确的测试，弧形的顶点P大致为B点到直线AC的垂点M的中心点。也就是说，P点为直线BM的中心点。当然，也有可能P点不在BM线上，所以准确点说就是，P与BM的垂直交点就是BM的中心点。

系统提供的该方法中，B和C点都有了但是没有A点，所以我们在描绘之前要先移动到A点

[bezierPath moveToPoint: CGPointMake(0, kRadian)]

实现代码：

    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];

实现效果：

image.png

这种方案实现的优点是 ，弧度的大小可以直接由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)时是四周都有阴影
    layer.shadowColor = [UIColor grayColor].CGColor;
    layer.shadowOpacity = 0.1;
    [showView.layer addSublayer:layer];

大功告成

image.png