UIBezierPath

作者: 天空中的球 | 来源:发表于2015-12-03 15:54 被阅读960次

    UIBezierPath是CoreGraphics的封装,使用它可以完成大部分的绘图操作。

    使用可以简单的分为三步:

    • 创建path
    • 添加路径到path
    • 将path绘制出来。

    线

    类要继承自UIView

    - (void)drawRect:(CGRect)rect
    {
        // 设置颜色
        UIColor *color = [UIColor redColor];
        [color set];
        // 初始化
        UIBezierPath* aPath = [UIBezierPath bezierPath];
        // 设置线宽
        aPath.lineWidth = 2.0;
        // 线条处理
        aPath.lineCapStyle = kCGLineCapRound; //线条拐角
        aPath.lineJoinStyle = kCGLineCapRound; //终点处理
       // 起始点
        [aPath moveToPoint:CGPointMake(100.0, 100.0)];
        // 画线
        [aPath addLineToPoint:CGPointMake(300.0, 100.0)]; // 第一点
        [aPath addLineToPoint:CGPointMake(300.0, 300.0)]; // 第二点
        [aPath addLineToPoint:CGPointMake(100.0, 300.0)]; // 第三点
        //通过调用closePath方法得到的
        [aPath closePath];
        // 根据坐标点连线
        [aPath stroke];
    
    
    }
    
    四边形

    在上边中将[aPath stroke]换成一个

     // 填充闭合圈子里面的颜色
     [aPath fill];
    
    增加fill之后的情景啦

    当然也有直接的画四边行的初始化化方法

    - (void)drawRect:(CGRect)rect
    {
        // 设置颜色
        UIColor *color = [UIColor redColor];
        [color set];
        // 初始化
        UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 200)];
        // 设置线宽
        aPath.lineWidth = 2.0;
        // 线条处理
        aPath.lineCapStyle = kCGLineCapRound; //线条拐角
        aPath.lineJoinStyle = kCGLineCapRound; //终点处理
        // 填充
        [aPath fill];
    
    }
    

    上面的效果同上。

     // 初始化
      UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 200)];
    

    将上边的bezierPathWithRect:换成bezierPathWithOvalInRect:,就变成了一个以右上角为(100,100)直接100的圆啦。
    当然画椭圆,直接改成CGRectMake(60, 100, 300, 200)

     UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(60, 100, 300, 200)];
    
    椭圆

    + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center // 圆弧的中心
                                      radius:(CGFloat)radius // 半径
                                  startAngle:(CGFloat)startAngle // 开始的角度
                                    endAngle:(CGFloat)endAngle  // 结束的角度
                                   clockwise:(BOOL)clockwise  // 是否顺时针方向
    

    直接实现

    - (void)drawRect:(CGRect)rect
    {
        UIColor *color = [UIColor redColor];
        [color set]; //设置线条颜色
        
        UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200)
                                                             radius:100
                                                         startAngle:0
                                                           endAngle:(M_PI * 270)/180
                                                          clockwise:YES];
    
        
        [aPath fill];
    }
    
    270度的弧

    贝塞尔曲线

    曲线段在当前点开始,在指定的点结束。曲线的形状有开始点,结束点,一个或者多个控制点的切线定义。

    贝塞尔曲线
    - (void)drawRect:(CGRect)rect
    {
        UIColor *color = [UIColor greenColor];
        [color set];
        UIBezierPath* aPath = [UIBezierPath bezierPath];
        aPath.lineWidth = 2.0;
        aPath.lineCapStyle = kCGLineCapRound; //线条拐角
        aPath.lineJoinStyle = kCGLineCapRound; //终点处理
        [aPath moveToPoint:CGPointMake(50, 100)];
    //    [aPath addQuadCurveToPoint:CGPointMake(300, 120) controlPoint:CGPointMake(100, 20)];
        [aPath addCurveToPoint:CGPointMake(300, 50) controlPoint1:CGPointMake(120, 30) controlPoint2:CGPointMake(230, 200)];
        [aPath stroke];
    }
    
    三次贝塞尔曲线

    备注

    看了martin的直播后,觉的下列这两个网址还是推荐的,特别是第一个,让我们更好理解贝塞尔曲线。

    参考

    http://blog.csdn.net/crayondeng/article/details/11093689
    https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIBezierPath_class/

    相关文章

      网友评论

      本文标题:UIBezierPath

      本文链接:https://www.haomeiwen.com/subject/bokshttx.html