绘制线段

2017-11-23  本文已影响11人  翻这个墙

绘制线段步骤

  1. 新建一个类,继承自UIView(略)

  2. 在-(void)drawRect:(CGRect)rect方法实现下述几步(略)

  3. 取得跟当前view相关联的图形上下文(layer上下文)

  4. 拼接路径,绘制相应的图形内容

获取图形上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

拼接路径

### 画一根线
    //创建贝塞尔路径
    UIBezierPath *path = [UIBezierPath bezierPath];

    // 2.1 设置起点
    [path moveToPoint:CGPointMake(10, 100)];

    // 添加线到终点
    [path addLineToPoint:CGPointMake(200, 200)];

//再添加一根线
        直接addLineToPoint,因为路径是拼接的,默认下一条线的起点是上一条线的终点。

    [path addLineToPoint:CGPointMake(100, 100)];


### 画两跟不连接的线
        //1. 第二次画的时候,重新设置起点,然后画线。一个路径可以包含多条线段。
        //2. 新创建一个路径,添加到上下文。开发中建议使用这种,比较容易控制每根线。
    //    path = [UIBezierPath bezierPath];
    //
    //    // 设置起点,移动到某个位置
    //    [path moveToPoint:CGPointMake(200, 200)];
    //
    //    // 添加一根线到某个点
    //    [path addLineToPoint:CGPointMake(100, 200)];

### 画曲线
        - 3个点,起点,终点,控制点。

把路径添加到上下文

CGContextAddPath(ctx, path.CGPath);

设置绘图状态

    // 设置绘图状态,描述线段信息
    CGContextSetLineWidth(ctx, 10);//线段宽度
    // 设置圆角顶角样式
    CGContextSetLineCap(ctx, kCGLineCapRound);

    CGContextSetLineJoin(ctx, kCGLineJoinRound);

把上下文渲染到视图

CGContextStrokePath(ctx);

贝塞尔路径

通过贝塞尔路径绘制线段步骤

  1. 新建一个类,继承自UIView(略)

  2. 在-(void)drawRect:(CGRect)rect方法实现下述几步(略)

// 描述路径
    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(50, 50)];

    [path addLineToPoint:CGPointMake(100, 100)];

    //设置绘图状态
    path.lineWidth = 10;//通过设置path的属性来设置

    // 渲染
    //渲染是使用贝塞尔路径的方法还是使用CG函数,具体看怎么设置绘图状态,混用会有bug
    //如果通过设置path的属性,使用贝塞尔路径封装好的方法,stroke,fill等。
    //如果通过CGContextSetLineWidth等方法,则用CGContextStrokePath(ctx)等渲染上下文
    //UIColor的方法setStroke、setFill方法,则都可以

    //描线
    [path stroke];

    // 填充方法:将区域颜色填充,但不会画上区域边线
//    [path fill];
上一篇 下一篇

猜你喜欢

热点阅读