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];

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