iOS_贝塞尔曲线初级篇

最近有做曲线图,所以就研究了一下
首先介绍一下UIBezierPath

UIBezierPath： UIBezierPath是在 UIKit 中的一个类，继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。使用此类可以定义常见的圆形、多边形等形状 。我们使用直线、弧（arc）来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

1. 首先我们需要一个继承UIView的类,然后重写他的drawRect方法
2. 然后调用一下这个view就行了

本篇文章只介绍简单的用法不介绍复杂的操作

#import "RectView.h"
#define pi 3.14159265359
#define   DEGREES_TO_RADIANS(degrees)  ((pi * degrees)/ 180)

@implementation RectView

/*
 UIBezierPath 基本使用方法

 UIBezierPath 对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线或曲线去创建。我们一般使用 UIBezierPath 都是在重写view的 drawRect 方法这种情形。我们用直线去创建矩形或多边形，使用曲线创建弧或者圆。创建和使用path对象步骤：

 1、 重写View的 drawRect 方法

 2、 创建 UIBezierPath 的对象

 3、 使用方法 moveToPoint: 设置初始点

 4、 根据具体要求使用 UIBezierPath 类方法绘图（比如要画线、矩形、圆、弧？等）

 5、 设置 UIBezierPath 对象相关属性 （比如 lineWidth 、 lineJoinStyle 、 aPath.lineCapStyle 、 color ）

 6、 使用stroke 或者 fill方法结束绘图
 */

/*
 在介绍其他使用方法之前，我们先来看一下 path 的几个属性，以便下面我进行设置。

 1、 [color set]; 设置线条颜色，也就是相当于画笔颜色

 2、 path.lineWidth = 5.0; 这个很好理解了，就是划线的宽度

 3、 path.lineCapStyle 这个线段起点是终点的样式，这个样式有三种：

 （

 1、 kCGLineCapButt 该属性值指定不绘制端点， 线条结尾处直接结束。这是默认值。

 2、 kCGLineCapRound 该属性值指定绘制圆形端点， 线条结尾处绘制一个直径为线条宽度的半圆。

 kCGLineCapSquare

 ）

 4、 path.lineJoinStyle 这个属性是用来设置两条线连结点的样式，同样它也有三种样式供我们选择

 (

 1、 kCGLineJoinMiter 斜接

 2、 kCGLineJoinRound 圆滑衔接

 3、 kCGLineJoinBevel 斜角连接

 ）

 5、 [path stroke]; 用 stroke 得到的是不被填充的 view ， [path fill]; 用 fill 得到的内部被填充的 view，这点在下面的代码还有绘制得到的图片中有，可以体会一下这两者的不同。
 */

-(void)drawRect:(CGRect)rect{

//    [self drawlineRect:rect];//五边形

//    [self drawjuxing:rect];//矩形

//    [self drawyuanxing:rect];//圆形

//    [self drawhuxing:rect];//弧形

//    [self drawerci:rect]; //二次绘制

    [self drawsanci:rect]; //三次绘制





}



-(void)drawsanci:(CGRect)rect{

    /*
     - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
     Parameters
     endPoint
     结束点
     controlPoint1
     第一个点
     controlPoint2
     第二个点
     */

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *path = [UIBezierPath bezierPath];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;

    [path moveToPoint:CGPointMake(100, 100)];
    [path addCurveToPoint:CGPointMake(200, 100) controlPoint1:CGPointMake(140, 50) controlPoint2:CGPointMake(180, 150)];

    [path stroke];


}


/**
 绘制二次曲线

 @param rect 范围
 */
-(void)drawerci:(CGRect)rect{

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色

    UIBezierPath* aPath = [UIBezierPath bezierPath];

    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理

    [aPath moveToPoint:CGPointMake(100, 100)];//设置初始点
    //终点  controlPoint:切点
    [aPath addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(100, 0)];


    [aPath stroke];  // 使用stroke 或者 fill方法结束绘图
}

-(void)drawhuxing:(CGRect)rect{

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色

    UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
                                                         radius:75
                                                     startAngle:0
                                                       endAngle:pi
                                                      clockwise:YES];

    /*
     绍一下这个方法中的参数：

     /

     ArcCenter: 原点

     radius: 半径

     startAngle: 开始角度

     endAngle: 结束角度

     /
     */
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理



    [aPath stroke];
}
//圆形
-(void)drawyuanxing:(CGRect)rect{

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理

    [aPath stroke];
}
//矩形
-(void)drawjuxing:(CGRect)rect{

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *aPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理

    [aPath stroke];

}

//五边形
-(void)drawlineRect:(CGRect)rect{

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色

    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    /*
     kCGLineCapButt,
     kCGLineCapRound,
     kCGLineCapSquare
     */
    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 根据坐标点连线 不填充
//    [aPath fill];//填充
}



@end

然后进行调用即可

    RectView * view = [[RectView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
    [view drawRect:CGRectMake(0, 0, WIDTH, HEIGHT)];
    [self.view addSubview:view];

在后面的文章会进行进一步分析,贝塞尔曲线的曲线图用法