利用CAShapeLayer和UIBezierPath实现中空透明圆，圆外填充色

最新推荐文章于 2021-06-30 16:30:41 发布

极光天轮

最新推荐文章于 2021-06-30 16:30:41 发布

阅读量7.4k

点赞数

分类专栏： iOS开发相关文章标签： uibezierpath ios cashaperlayer

本文链接：https://blog.csdn.net/w_x_p/article/details/50553342

版权

iOS开发相关专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今天刚好有同事问起实现中空透明圆，圆外是填充色的矩形怎么去实现，自己便试着去实现。你会说将一个圆和一个矩形组合起来不就行了，想一下这样并不能够实现，图层进行层叠，哪一个图形(上)是纯色都会出现另外一个图形(下)的颜色。

CAShapeLayer和UIBezierPath结合，调用CAShapeLayer的path属性，然后再实现CAShapeLayer的fillcolor属性，便可以在UIBezierPath所绘制的路径内填充颜色。顺着这个思路，来实现一下：

1、首先利用贝塞尔曲线画一个圆，注意，这个圆是不能够闭合的，使终点和起点非常靠近，一般时候视觉上就很难发现这个圆没有闭合了。

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    
    CGFloat centerX = self.view.center.x;
    CGFloat centerY = self.view.center.y;
    
    UIBezierPath *bezierpath = [UIBezierPath bezierPath];
    [bezierpath moveToPoint:CGPointMake(centerX + 50, centerY)];
    [bezierpath addCurveToPoint:CGPointMake(centerX, centerY - 50) controlPoint1:CGPointMake(centerX + 50, centerY) controlPoint2:CGPointMake(centerX + 50, centerY - 50)];
    [bezierpath addCurveToPoint:CGPointMake(centerX - 50, centerY) controlPoint1:CGPointMake(centerX, centerY - 50) controlPoint2:CGPointMake(centerX - 50, centerY - 50)];
    [bezierpath addCurveToPoint:CGPointMake(centerX, centerY + 50) controlPoint1:CGPointMake(centerX - 50, centerY) controlPoint2:CGPointMake(centerX - 50, centerY + 50)];
    [bezierpath addCurveToPoint:CGPointMake(centerX + 50, centerY - 0.00001) controlPoint1:CGPointMake(centerX, centerY + 50) controlPoint2:CGPointMake(centerX + 50, centerY + 50)];
    bezierpath.lineWidth = 1;
    [bezierpath closePath];
    shapeLayer.path = bezierpath.CGPath;
    shapeLayer.fillColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];

2、从最后的终点处再向外延伸出一条50宽的线，然后折向下延伸，以此类推延伸出一个矩形。

3、最后来看一下最终的代码，和最后的效果图。

self.view.backgroundColor = [UIColor colorWithRed:78/255.0f green:0/255.0f blue:114/255.0f alpha:1.0f];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    
    CGFloat centerX = self.view.center.x;
    CGFloat centerY = self.view.center.y;
    
    UIBezierPath *bezierpath = [UIBezierPath bezierPath];
    [bezierpath moveToPoint:CGPointMake(centerX + 50, centerY)];
    [bezierpath addCurveToPoint:CGPointMake(centerX, centerY - 50) controlPoint1:CGPointMake(centerX + 50, centerY) controlPoint2:CGPointMake(centerX + 50, centerY - 50)];
    [bezierpath addCurveToPoint:CGPointMake(centerX - 50, centerY) controlPoint1:CGPointMake(centerX, centerY - 50) controlPoint2:CGPointMake(centerX - 50, centerY - 50)];
    [bezierpath addCurveToPoint:CGPointMake(centerX, centerY + 50) controlPoint1:CGPointMake(centerX - 50, centerY) controlPoint2:CGPointMake(centerX - 50, centerY + 50)];
    [bezierpath addCurveToPoint:CGPointMake(centerX + 50, centerY - 0.00001) controlPoint1:CGPointMake(centerX, centerY + 50) controlPoint2:CGPointMake(centerX + 50, centerY + 50)];
    
    [bezierpath addLineToPoint:CGPointMake(centerX + 100, centerY - 0.00001)];
    [bezierpath addLineToPoint:CGPointMake(centerX + 100, centerY + 100)];
    [bezierpath addLineToPoint:CGPointMake(centerX - 100, centerY + 100)];
    [bezierpath addLineToPoint:CGPointMake(centerX - 100, centerY - 100)];
    [bezierpath addLineToPoint:CGPointMake(centerX + 100, centerY - 100)];
    [bezierpath addLineToPoint:CGPointMake(centerX + 100, centerY - 0.00001)];
    
    bezierpath.lineWidth = 1;
    [bezierpath closePath];
    shapeLayer.path = bezierpath.CGPath;
    shapeLayer.fillColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];