贝塞尔曲线学习 (一)

本系列文章为自己学习BezierPath的过程记录，有些知识是百度出来的，这里算个总结。

参考

1: 画直线，也叫做一阶曲线。

- (void)drawRect:(CGRect)rect
{
    // 设置线的填充色
    [[UIColor redColor] setStroke];
    
    // 新建一个bezier对象
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    // 设置线宽度
    bezierPath.lineWidth = 10;
    // 设置线两头样式
    bezierPath.lineCapStyle = kCGLineCapRound;
    // 设置起点、终点坐标
    [bezierPath moveToPoint:CGPointMake(10, 10)];
    [bezierPath addLineToPoint:CGPointMake(100, 100)];
    // 开始绘制
    [bezierPath stroke];
}

效果图：

屏幕快照 2015-12-30 14.10.31.png

2: 二阶曲线

二阶曲线，是指有一个公共切点(不知道怎么形容)曲线
网上扣了一张图，B这个点，就是所谓的公共切点

屏幕快照 2015-12-30 14.14.14.png

- (void)drawRect:(CGRect)rect
{
    // 设置线的填充色
    [[UIColor redColor] setStroke];
    
    // 新建一个bezier对象
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    // 设置线宽度
    bezierPath.lineWidth = 10;
    // 设置线两头样式
    bezierPath.lineCapStyle = kCGLineCapRound;
    // 设置起点、终点坐标
    [bezierPath moveToPoint:CGPointMake(100, 100)];
    [bezierPath addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(300, 0)];
    
    // 开始绘制
    [bezierPath stroke];
}

这里的公共切点，就是右上角那个点啦。

屏幕快照 2015-12-30 14.16.05.png

3: 三阶曲线

三阶曲线，与二阶曲线类似，系统都有提供内置的方法，只是多了一个公共切点而已。

屏幕快照 2015-12-30 14.19.50.png

- (void)drawRect:(CGRect)rect
{
    // 设置线的填充色
    [[UIColor redColor] setStroke];
    
    // 新建一个bezier对象
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    // 设置线宽度
    bezierPath.lineWidth = 10;
    // 设置线两头样式
    bezierPath.lineCapStyle = kCGLineCapRound;
    // 设置起点、终点坐标
    [bezierPath moveToPoint:CGPointMake(100, 100)];
    [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];
    
    // 开始绘制
    [bezierPath stroke];
}

屏幕快照 2015-12-30 14.21.28.png

4: 多阶曲线

系统最多只给出了三阶曲线的绘制方法，这时有的人就要说了，产品要做一个4阶、5阶的曲线，怎么搞？
查一下API，你会发现一个appendPath的方法，不用说，看名字就知道什么意思了吧。

- (void)drawRect:(CGRect)rect
{
    // 设置线的填充色
    [[UIColor redColor] setStroke];
    
    // 新建一个bezier对象
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    // 设置线宽度
    bezierPath.lineWidth = 10;
    // 设置线两头样式
    bezierPath.lineCapStyle = kCGLineCapRound;
    // 设置起点、终点坐标
    [bezierPath moveToPoint:CGPointMake(100, 100)];
    [bezierPath addCurveToPoint:CGPointMake(200, 200)
                  controlPoint1:CGPointMake(150, 0)
                  controlPoint2:CGPointMake(150, 300)];
    
    // 创建第二条贝塞尔曲线
    UIBezierPath *bezierPath2 = [UIBezierPath bezierPath];
    // 设置起点、终点坐标
    [bezierPath2 moveToPoint:CGPointMake(200, 200)];
    [bezierPath2 addCurveToPoint:CGPointMake(290, 290)
                   controlPoint1:CGPointMake(250, 0)
                   controlPoint2:CGPointMake(250, 300)];
    // 将第二条线，加到第一条线上面去
    [bezierPath appendPath:bezierPath2];
    
    // 开始绘制
    [bezierPath stroke];
}

屏幕快照 2015-12-30 14.33.38.png