UIBezierPath基本用法及画圆角

首先说一下画圆角吧,其实UIBezierPath的画角规则是这样的:UIBezierPath基本用法及画圆角_第1张图片
代码:

#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

你可能感兴趣的:(技术笔记)