UIBezierPath基本用法及画圆角

最新推荐文章于 2024-08-21 20:26:01 发布

原创最新推荐文章于 2024-08-21 20:26:01 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

技术笔记专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用UIBezierPath实现复杂的圆角效果，包括画圆角的基本方法及通过添加路径来绘制特殊形状的技巧。

部署运行你感兴趣的模型镜像

首先说一下画圆角吧，其实UIBezierPath的画角规则是这样的：这里写图片描述
代码：

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) CAShapeLayer *shapeLayer;

@property (nonatomic, strong) UIBezierPath      *path;

@property (nonatomic, strong) UIView *maskView;

@end

@implementation ViewController

- (CAShapeLayer *)shapeLayer
{
    if (!_shapeLayer) {

        _shapeLayer = [[CAShapeLayer alloc] init];
        _shapeLayer.path = self.appendPath.CGPath;
        _shapeLayer.fillColor = [UIColor redColor].CGColor;
//        _shapeLayer.strokeColor = [UIColor greenColor].CGColor;
//        _shapeLayer.lineWidth = 1.0;
        _shapeLayer.fillRule = kCAFillRuleEvenOdd;

    }
    return _shapeLayer;
}

//- (UIBezierPath *)path
//{
//    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, CGRectGetWidth(self.view.frame) * 0.8, 35) cornerRadius:5];
//
//    [bezierPath appendPath:self.appendPath];
//    [bezierPath setUsesEvenOddFillRule:YES];
//    return bezierPath;
//}

#define DEGREES_TO_RADIANS(degrees) ((3.14159265359 * degrees) / 180)

- (UIBezierPath *)appendPath
{
    UIBezierPath *appendPath = [UIBezierPath bezierPath];

    [appendPath moveToPoint:CGPointMake(CGRectGetWidth(_maskView.frame) - 3, 0)];

    [appendPath addLineToPoint:CGPointMake(CGRectGetWidth(_maskView.frame) - 20, 10)];

    [appendPath addLineToPoint:CGPointMake(0, 10)];

    [appendPath addArcWithCenter:CGPointMake(5, 15) radius:5 startAngle:DEGREES_TO_RADIANS(270) endAngle:DEGREES_TO_RADIANS(180) clockwise:NO];
    // 添加圆到path
//    [appendPath addArcWithCenter:CGPointMake(5, 15) radius:5.0 startAngle:DEGREES_TO_RADIANS(90) endAngle:DEGREES_TO_RADIANS(90) clockwise:YES];

    [appendPath addLineToPoint:CGPointMake(0, CGRectGetHeight(_maskView.frame))];

    [appendPath addLineToPoint:CGPointMake(CGRectGetWidth(_maskView.frame), CGRectGetHeight(_maskView.frame))];

    [appendPath addLineToPoint:CGPointMake(CGRectGetWidth(_maskView.frame), 10)];

    [appendPath addLineToPoint:CGPointMake(CGRectGetWidth(_maskView.frame) - 3, 0)];

    return appendPath;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];


    _maskView = [[UIView alloc] initWithFrame:CGRectMake(20, 200, CGRectGetWidth(self.view.frame) * 0.8, 60)];
    _maskView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:_maskView];

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

其中

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

其参数意义：

center：圆心的坐标

radius：半径

startAngle：起始的弧度

endAngle：圆弧结束的弧度

clockwise：YES为顺时针，No为逆时针

初始化方法

+ (instancetype)bezierPath;

//创建一个矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;

//创建圆形或者椭圆形
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

//根据矩形画带圆角的曲线
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius

//在矩形中，可以针对四角中的某个角加圆角
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii; 
/**
参数：
corners:枚举值，可以选择某个角

cornerRadii:圆角的大小
*/

//以某个中心点画弧线
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
/**
参数：
center:弧线中心点的坐标

radius:弧线所在圆的半径

startAngle:弧线开始的角度值

endAngle:弧线结束的角度值

clockwise:是否顺时针画弧线
*/

// 根据CGPath创建并返回一个新的UIBezierPath对象
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

//画二元曲线，一般和moveToPoint配合使用
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
/**
参数：
endPoint:曲线的终点

controlPoint:画曲线的基准点
*/

//以三个点画一段曲线，一般和moveToPoint配合使用
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
/**
参数：

endPoint:曲线的终点

controlPoint1:画曲线的第一个基准点

controlPoint2:画曲线的第二个基准点
*/

基本用法：

//设置描绘的起点
- (void)moveToPoint:(CGPoint)point; 

//画直线
- (void)addLineToPoint:(CGPoint)point; 

//画曲线，分别对应终点和两个控制点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

//画圆弧
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise