美文网首页
基本线条的绘制

基本线条的绘制

作者: Z了个L | 来源:发表于2016-08-24 15:54 被阅读16次
    • 关闭路径:自动的从路径的终点连接到 路径的起点
    • 如果没有关闭路径,使用fill会自动关闭路径
    
    // DrawView.h
    
    #import <UIKit/UIKit.h>
    
    @interface DrawView : UIView
    
    @end
    
    
    // DrawView.m
    
    #import "DrawView.h"
    
    @implementation DrawView
    
    // 作用: 绘图
    // 什么时候调用:(系统自动调用)当View显示的时候调用
    // 参数:当前View的bounds
    // 在drawRect系统已经自动创建了一个跟当前View相关联的上下文
    
    - (void)drawRect:(CGRect)rect {
    
    //    //1.获取跟View相关联的上下文(UIGraphics开头)  ---- 画板
    //    CGContextRef ctx =  UIGraphicsGetCurrentContext();
    //    //2.描述路径
    //    UIBezierPath *path = [UIBezierPath bezierPath]; //---- 画笔
    //    //设置起点
    //    [path moveToPoint:CGPointMake(50, 250)];
    //    //添加一根曲线到某个点
    //    [path addQuadCurveToPoint:CGPointMake(250, 250) controlPoint:CGPointMake(80, 100)];
    //    //3.把路径添加到上下文
    //    CGContextAddPath(ctx, path.CGPath);
    //    //4.把上下文内容渲染到View上.
    //    CGContextStrokePath(ctx);
    
        /*
    //    // 拿到画笔
    //    UIBezierPath *path = [UIBezierPath bezierPath];
    //    // 设置起点
    //    [path moveToPoint:CGPointMake(50, 150)];
    //    // 添加一根线到某个点
    //    [path addLineToPoint:CGPointMake(250, 50)];
    //    // 给这支笔设置笔宽
    //    [path setLineWidth:10];
    //    // 设置笔的样式
    //    [path setLineCapStyle:kCGLineCapRound];
    //    // 设置画笔的颜色
    //    [[UIColor redColor] set];
    //    // 封笔结束
    //    [path stroke];
         */
        
        // 画直线通过修改上下文
        [self drawLineOne];
        // 画直线通过修改画笔
    //    [self drawLineTwo];
    }
    
    // 画直线通过修改上下文
    - (void)drawLineOne {
        
        // 1.获取跟View相关联的上下文(uigraphics开头)
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 2.描述路径
        // 一条路径可以绘制多条线
        UIBezierPath *path = [UIBezierPath bezierPath];
        
    //    // 设置起点
    //    [path moveToPoint:CGPointMake(50, 150)];
    //    //添加一根线到某个点
    //    [path addLineToPoint:CGPointMake(250, 50)];
    //    
    //    //画第二根线
    //    //[path moveToPoint:CGPointMake(50, 250)];
    //    //[path addLineToPoint:CGPointMake(250, 100)];
    //    
    //    // 把上一条路径的终点,当作是下一个路径的起点
    //    [path addLineToPoint:CGPointMake(50, 250)];
        
        // 设置起点
        [path moveToPoint:CGPointMake(50, 250)];
        // 添加一根曲线到某个点
        //    [path addQuadCurveToPoint:CGPointMake(250, 250) controlPoint:CGPointMake(80, 100)];
        // 添加一根线到某个点
        [path addLineToPoint:CGPointMake(250, 250)];
        
        
        //设置上下文的状态
        CGContextSetLineWidth(ctx, 10);
        //设置线的连接样式
        /*
         kCGLineJoinMiter,
         kCGLineJoinRound,
         kCGLineJoinBevel
         */
    //    CGContextSetLineJoin(ctx, kCGLineJoinRound);
        //设置线的顶角样式
        /*
         kCGLineCapButt,
         kCGLineCapRound,
         kCGLineCapSquare
         */
        CGContextSetLineCap(ctx, kCGLineCapRound);
        // 设置画笔的颜色
        [[UIColor redColor] set];
        
        //3.把路径添加到上下文
        //UIBezierPath->UIKit -->  CGPathRef->CoreGraphics
        CGContextAddPath(ctx, path.CGPath);
        //4.把上下文当中绘制的内容渲染到跟View关联的layer.(stroke ,fill)
        CGContextStrokePath(ctx);
    }
    
    // 画直线通过修改画笔
    - (void)drawLineTwo {
        // 1.获取跟view相关联的上下文(UIGraphics开头) ---- 画板
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 2.描述路径
        UIBezierPath *path = [UIBezierPath bezierPath]; // 画笔
        // 设置起点
        [path moveToPoint:CGPointMake(50, 250)];
        // 添加一根曲线到某个点
    //    [path addQuadCurveToPoint:CGPointMake(250, 250) controlPoint:CGPointMake(80, 100)];
        // 添加一根线到某个点
        [path addLineToPoint:CGPointMake(250, 250)];
        // 给这支笔设置笔宽
        [path setLineWidth:10];
        // 设置笔的样式
        [path setLineCapStyle:kCGLineCapRound];
        // 设置画笔的颜色
        [[UIColor redColor] set];
        // 封笔结束
        [path stroke];
        // 3.把路径添加到上下文
        CGContextAddPath(ctx, path.CGPath);
        // 4.把上下文内容渲染到View上
        CGContextStrokePath(ctx);
    }
    
    @end
    
    

    参考链接





    相关文章

      网友评论

          本文标题:基本线条的绘制

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