UIBezierPath的使用

作者: 嘹亮的浩哥 | 来源:发表于2016-09-14 17:45 被阅读404次

iOS部分圆角
ios指定圆角设置
图片设置圆角
UIBezierPath 类详细解析
使用UIBezierPath贝塞尔曲线配合CAShapeLaye
UIBezierPath
UIBezierPath之画图软件Demo制作
iOS贝塞尔曲线（UIBezierPath）的基本使用方法
UIBezierPath和CAShapeLayer结合实现画图
iOS-贝塞尔曲线(UIBezierPath)的使用(一)

1.首先先把UIBezierPath的API全部拿来看看...

#import <Foundation/Foundation.h>
#import <CoreGraphics/CoreGraphics.h>
#import <UIKit/UIKitDefines.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
        UIRectCornerTopLeft    = 1 << 0,      // 上左圆角
        UIRectCornerTopRight    = 1 << 1,    // 上右圆角
        UIRectCornerBottomLeft  = 1 << 2,    // 下左圆角
        UIRectCornerBottomRight = 1 << 3,    // 下右圆角
        UIRectCornerAllCorners  = ~0UL          //  四个角都是圆角
    };
    
    NS_CLASS_AVAILABLE_IOS(3_2) @interface UIBezierPath : NSObject<NSCopying, NSCoding>
    
    // 创建一个贝塞尔曲线
    + (instancetype)bezierPath;
    
    // 创建一个方形
    + (instancetype)bezierPathWithRect:(CGRect)rect;
    
    // 创建一个椭圆
    + (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
    
    // 创建一个圆角方形
    // cornerRadius：圆角半径
    // rounds all corners with the same horizontal and vertical radius
    + (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
    
    // 创建一个圆角方形
    // cornerRadii：圆角size
    // corners:    圆角位置
    + (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
    
    // 创建一个弧线
    // center:弧线中心点
    // startAngle:弧线开始角度
    // endAngle:结束角度
    // clockwise:是否是顺时针方向 YES：顺时针
    + (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
    
    // 通过已经有的CGPathRef路径，创建贝塞尔曲线
    + (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
    
    // 初始化方法
    - (instancetype)init NS_DESIGNATED_INITIALIZER;
    
    //
    - (nullable instancetype)initWithCoder:(NSCoder *)aDecoder NS_DESIGNATED_INITIALIZER;
    
    // Returns an immutable CGPathRef which is only valid until the UIBezierPath is further mutated.
    // Setting the path will create an immutable copy of the provided CGPathRef, so any further mutations on a provided CGMutablePathRef will be ignored.
    
    // 贝塞尔曲线的路径属性
    @property(nonatomic) CGPathRef CGPath;
    - (CGPathRef)CGPath NS_RETURNS_INNER_POINTER CF_RETURNS_NOT_RETAINED;
    
    // Path construction
    
    // 移动到某个点
    - (void)moveToPoint:(CGPoint)point;
    
    // 添加线段到某个点
    - (void)addLineToPoint:(CGPoint)point;
    
    // 添加曲线到某个点
    // endPoint:曲线末尾的点
    // controlPoint1:贝塞尔曲线控制点一
    // controlPoint2:贝塞尔曲线控制点二
    - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
    
    // 添加曲线到某个点
    // endPoint:曲线末尾的点
    // controlPoint:贝塞尔曲线控制点
    - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
    
    // 添加弧线
    // center:弧线中心点
    // startAngle:开始角度
    // endAngle:末尾角度
    // clockwise:是否是顺时针
    - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
    
    // 关闭路径
    - (void)closePath;
    
    // 删除所有的点儿
    - (void)removeAllPoints;
    
    // 追加贝塞尔曲线
    - (void)appendPath:(UIBezierPath *)bezierPath;
    
    // 翻转贝塞尔曲线
    // Modified paths
    - (UIBezierPath *)bezierPathByReversingPath NS_AVAILABLE_IOS(6_0);
    
    // 使用矩阵变换
    // Transforming paths
    - (void)applyTransform:(CGAffineTransform)transform;
    
    // Path info(路径信息)
    @property(readonly,getter=isEmpty) BOOL empty;  // 是否是空路径
    @property(nonatomic,readonly) CGRect bounds;    // 路径的bounds
    @property(nonatomic,readonly) CGPoint currentPoint;  // 路径当前的点
    - (BOOL)containsPoint:(CGPoint)point;                          // 路径是否包含某个点
    
    // Drawing properties (绘制属性)
    @property(nonatomic) CGFloat lineWidth;                //  线宽
    @property(nonatomic) CGLineCap lineCapStyle;      //  线头 & 线尾的样式(圆、)
    @property(nonatomic) CGLineJoin lineJoinStyle;      //  两条线交接地方的样式(圆、)
    @property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter(该属性起作用，当 lineJoinStyle = kCGLineJoinMiter的时候)
    @property(nonatomic) CGFloat flatness;                // 待定
    @property(nonatomic) BOOL usesEvenOddFillRule; // Default is NO. When YES, the even-odd fill rule is used for drawing, clipping, and hit testing.
    
    // 设置虚线
    - (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
    
    //
    - (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;
    
    // Path operations on the current graphics context
    
    // 填充
    - (void)fill;
    
    // 描边
    - (void)stroke;
    
    // These methods do not affect the blend mode or alpha of the current graphics context
    - (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
    - (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
    
    // 添加裁剪
    - (void)addClip;

2.貌似只有API并没有什么卵用,那好吧,我们上🌰

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    
    // Set the starting point of the shape.
    [aPath moveToPoint:CGPointMake(100.0, 0.0)];
    // Draw the lines
    [aPath addLineToPoint:CGPointMake(200.0, 40.0)];
    [aPath addLineToPoint:CGPointMake(160, 140)];
    [aPath addLineToPoint:CGPointMake(40.0, 140)];
    [aPath addLineToPoint:CGPointMake(0.0, 40.0)];
//    [aPath closePath];//第五条线通过调用closePath方法得到的
    
    [aPath stroke];//Draws line 根据坐标点连线

Snip20160914_3.png

[aPath closePath];//这行代码加上就是一个完成的图形

Snip20160914_4.png

 [aPath fill];

Snip20160914_5.png

**** 另外的一个🌰 ****

由于需要画圆圈,我们需要知道他从哪里开始转,怎么转...

03093003-40B0-49B9-AADF-2E8CE8E2647A.png

    UIColor *color = [UIColor redColor];
    [color set];
    
    UIBezierPath* aPath3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200/2, 200/2)
                            
                                                          radius:200/2 - 2.5
                            
                                                      startAngle:DEGREES_TO_RADIANS(0)
                            
                                                        endAngle:DEGREES_TO_RADIANS(360)
                            
                                                       clockwise:YES];
    
    aPath3.lineWidth = 5;
    
    aPath3.lineCapStyle = kCGLineCapRound;
    
    aPath3.lineJoinStyle = kCGLineCapRound;
    [aPath3 stroke];
    //下面这个就是运行结果

Snip20160914_6.png

又一个🌰


    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    
    [aPath moveToPoint:CGPointMake(100.0, 0.0)];
    
    [aPath addQuadCurveToPoint:CGPointMake(200.0, 0) controlPoint:CGPointMake(150, 50)];
    
    [aPath stroke];//Draws line 根据坐标点连线
}

原理就是本来两个点连成一个直线,但是加了一个控制点,就像我们小时候玩的弓箭🏹是一样的效果,自行脑补...

Snip20160914_7.png

3,那么现在又有一个问题,怎么让这些绘图动起来呢!!!


CAShapeLayer 是 CALayer 的子类，但是比 CALayer 更灵活，可以画出各种图形,CAShapeLayer 
有一个神奇的属性 path 用这个属性配合上 UIBezierPath 这个类就可以达到超神的效果。


    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    
    [aPath moveToPoint:CGPointMake(0, 100.0)];
    
    [aPath addCurveToPoint:CGPointMake(200,100) controlPoint1:CGPointMake(70, 150) controlPoint2:CGPointMake(140, 50)];

//    [aPath stroke];//Draws line 根据坐标点连线
    
    CAShapeLayer *sharpLayer = [CAShapeLayer layer];
    sharpLayer.frame = self.bounds;
    
    [self.layer insertSublayer:sharpLayer atIndex:1];
    
    sharpLayer.fillColor = [[UIColor clearColor] CGColor];
    
    
    sharpLayer.strokeColor = [UIColor blueColor].CGColor;//指定path的渲染颜色
    sharpLayer.lineCap = kCALineCapRound;//指定线的边缘是圆的
    
    sharpLayer.lineJoin = kCALineJoinRound;
    
    sharpLayer.lineWidth = 5;//线的宽度
    sharpLayer.path =[aPath CGPath];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    
    animation.duration = 5;
    
    animation.fromValue = @(0.0);
    
    animation.toValue = @(1.0);
    
    [sharpLayer addAnimation:animation forKey:@"strokeEnd"];

2016-09-14 17_37_37.gif

同样,让圆形进度条也就是一样的效果代码如下

UIColor *color = [UIColor redColor];
    [color set];
    
    UIBezierPath* aPath3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200/2, 200/2)
                            
                                                          radius:200/2 - 2.5
                            
                                                      startAngle:DEGREES_TO_RADIANS(0)
                            
                                                        endAngle:DEGREES_TO_RADIANS(360)
                            
                                                       clockwise:YES];
    
    aPath3.lineWidth = 5;
    
    aPath3.lineCapStyle = kCGLineCapRound;
    
    aPath3.lineJoinStyle = kCGLineCapRound;
    [aPath3 stroke];
    //下面这个就是运行结果
    
    CAShapeLayer *sharpLayer = [CAShapeLayer layer];
    sharpLayer.frame = self.bounds;
    
    [self.layer insertSublayer:sharpLayer atIndex:1];
    
    sharpLayer.fillColor = [[UIColor clearColor] CGColor];
    
    
    sharpLayer.strokeColor = [UIColor blueColor].CGColor;//指定path的渲染颜色
    sharpLayer.lineCap = kCALineCapRound;//指定线的边缘是圆的
    
    sharpLayer.lineJoin = kCALineJoinRound;
    
    sharpLayer.lineWidth = 5;//线的宽度
    sharpLayer.path =[aPath3 CGPath];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    
    animation.duration = 5;
    
    animation.fromValue = @(0.0);
    
    animation.toValue = @(1.0);
    
    [sharpLayer addAnimation:animation forKey:@"strokeEnd"];

4.让另外一个view和他一起动可以吗?

    UIColor *color = [UIColor redColor];
    [color set];
    
    UIBezierPath* aPath3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120/2, 120/2)
                            
                                                          radius:120/2 - 2.5
                            
                                                      startAngle:DEGREES_TO_RADIANS(0)
                            
                                                        endAngle:DEGREES_TO_RADIANS(360)
                            
                                                       clockwise:YES];
    
    aPath3.lineWidth = 5;
    
    aPath3.lineCapStyle = kCGLineCapRound;
    
    aPath3.lineJoinStyle = kCGLineCapRound;
//    [aPath3 stroke];
    //下面这个就是运行结果
    
    CAShapeLayer *sharpLayer = [CAShapeLayer layer];
    sharpLayer.frame = self.bounds;
    
    [self.layer insertSublayer:sharpLayer atIndex:1];
    
    sharpLayer.fillColor = [[UIColor clearColor] CGColor];
    
    
    sharpLayer.strokeColor = [UIColor colorWithRed:22.0/255.0 green:150.0/255.0 blue:234.0/255.0 alpha:1.0].CGColor;//指定path的渲染颜色
    sharpLayer.lineCap = kCALineCapRound;//指定线的边缘是圆的
    
    sharpLayer.lineJoin = kCALineJoinRound;
    
    sharpLayer.lineWidth = 5;//线的宽度
    sharpLayer.path =[aPath3 CGPath];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    
    animation.duration = 5;
    
    animation.fromValue = @(0.0);
    
    animation.toValue = @(1.0);
    
    [sharpLayer addAnimation:animation forKey:@"strokeEnd"];
    
    
    _circleImageView  = [[UIImageView alloc] initWithFrame:CGRectMake(30, 110, 13, 13)];
    _circleImageView.image = [UIImage imageNamed:@"ProgressCircle"];
    [self insertSubview:_circleImageView atIndex:9];
    
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyAnimation.path= sharpLayer.path;
    keyAnimation.fillMode = kCAFillModeForwards;
    keyAnimation.calculationMode = kCAAnimationPaced;
    keyAnimation.duration = 5;
    keyAnimation.removedOnCompletion = NO;
    [sharpLayer addAnimation:animation forKey:@"strokeEndAnimation"];
    [_circleImageView.layer addAnimation:keyAnimation forKey:nil];

2016-09-14 18_01_12.gif

iOS部分圆角
使用 CAShapeLayer + UIBezierPath 方式 UIBezierPath *maskPath ...
ios指定圆角设置
可以使用UIBezierPath的 (UIBezierPath *)bezierPathWithRoundedRe...
图片设置圆角
直接设置，离屏渲染使用贝塞尔曲线UIBezierPath 使用CAShapeLayer和UIBezierPath
UIBezierPath 类详细解析
UIBezierPath类详细解析（一） —— 基本概览UIBezierPath类详细解析（二） —— 基本使用（...
使用UIBezierPath贝塞尔曲线配合CAShapeLaye
使用UIBezierPath贝塞尔曲线配合CAShapeLayer抠图系统提供的UIBezierPath构造方法...
UIBezierPath
1.使用UIBezierPath画图步骤创建一个UIBezierPath对象调用-moveToPoint:设置...
UIBezierPath之画图软件Demo制作
Demo 地址 UIBezierPath 简介: 使用UIBezierPath类可以创建基于矢量的路径。此类是Co...
iOS贝塞尔曲线（UIBezierPath）的基本使用方法
简介 UIBezierPath是对Core Graphics框架的一个封装，使用UIBezierPath类我们可以...
UIBezierPath和CAShapeLayer结合实现画图
UIBezierPath :使用UIBezierPath类可以创建基于矢量的路径, 这个类在UIKit中. 此类是...
iOS-贝塞尔曲线(UIBezierPath)的使用(一)
UIBezierPath是UIKit中Core Graphics框架中的一个类，使用UIBezierPath可以绘...