美文网首页iOS开发iOS 开发 iOS学习笔记
ios Quartz2D使用(画一些简单的图形)(1)

ios Quartz2D使用(画一些简单的图形)(1)

作者: 摄影师诺风 | 来源:发表于2016-04-26 14:31 被阅读84次

    本人写这个纯粹是为了记住ios中繁琐的动画,一个各种各样的路径,上年纪了,记不住了。

    绘图的步骤: 1.获取上下文 2.创建路径(描述路径) 3.把路径添加到上下文 4.渲染上下文

    一、画线段(这些都是要继承uiview 重写(void)drawRect:(CGRect)rect 方法,后面会说在viewcontroller中如何画)

    1.原始方法

        1.获取图形上下文
        // 目前我们所用的上下文都是以UIGraphics
        // CGContextRef Ref:引用 CG:目前使用到的类型和函数 一般都是CG开头 CoreGraphics
       // CGContextRef 相当于画布
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 2.描述路径
        // 创建路径
        // 路径相当于我们的画笔
        CGMutablePathRef path = CGPathCreateMutable();
        
        // 设置起点
        // path:给哪个路径设置起点
        CGPathMoveToPoint(path, NULL, 50, 50);
        
        // 添加一根线到某个点
        CGPathAddLineToPoint(path, NULL, 200, 200);
        
        // 3.把路径添加到上下文
        CGContextAddPath(ctx, path);
        
        // 4.渲染上下文
        CGContextStrokePath(ctx);
    

    2.自带路径

        //系统为你默认封装了一个路径在里面
        // 获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 描述路径
        // 设置起点
        CGContextMoveToPoint(ctx, 50, 50);
        CGContextAddLineToPoint(ctx, 200, 200);
        // 渲染上下文
        CGContextStrokePath(ctx);
    

    3.贝瑟尔路径

    个人感觉这是最灵活的,我比较喜欢的方式

        // UIKit已经封装了一些绘图的功能
        // 贝瑟尔路径
        // 创建路径
        UIBezierPath *path = [UIBezierPath bezierPath];
        // 设置起点
        [path moveToPoint:CGPointMake(50, 50)];
        // 添加一根线到某个点
        [path addLineToPoint:CGPointMake(200, 200)];
        // 绘制路径
        [path stroke];
    

    4.画多条直线,和设置线段的属性

        // 获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 描述路径
        //起点
        CGContextMoveToPoint(ctx, 50, 50);
        
        CGContextAddLineToPoint(ctx, 100, 50);
        
        // 设置起点
        CGContextMoveToPoint(ctx, 80, 60);
        
        // 默认下一根线的起点就是上一根线终点
        CGContextAddLineToPoint(ctx, 100, 200);
        
        // 设置绘图状态,一定要在渲染之前
        // 颜色
        [[UIColor redColor] setStroke];
        
        // 线宽
        CGContextSetLineWidth(ctx, 5);
        
        // 设置连接样式
        CGContextSetLineJoin(ctx, kCGLineJoinBevel);
        
        // 设置顶角样式
        CGContextSetLineCap(ctx, kCGLineCapRound);
        
        
        // 渲染上下文
        CGContextStrokePath(ctx);
    

    贝瑟尔方式

        UIBezierPath *path = [UIBezierPath bezierPath];
        
        [path moveToPoint:CGPointMake(50, 50)];
        
        [path addLineToPoint:CGPointMake(200, 200)];
        
        
        path.lineWidth = 10;
        [[UIColor redColor] set];
        
        [path stroke];
        
        UIBezierPath *path1 = [UIBezierPath bezierPath];
        
        [path1 moveToPoint:CGPointMake(0, 0)];
        
        [path1 addLineToPoint:CGPointMake(30, 60)];
        [[UIColor greenColor] set];
        
        path1.lineWidth = 3;
        
        [path1 stroke];
    

    5.曲线

    // 获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 描述路径
        // 设置起点
        CGContextMoveToPoint(ctx, 50, 100);
        
        // cpx:控制点的xy (就是顶点的xy)
        //x y :结束点的xy
    //    CGContextAddQuadCurveToPoint(<#CGContextRef  _Nullable c#>, <#CGFloat cpx#>, <#CGFloat cpy#>, <#CGFloat x#>, <#CGFloat y#>)
        CGContextAddQuadCurveToPoint(ctx, 150, 0, 250, 100);
        
        // 渲染上下文
        CGContextStrokePath(ctx);
    

    圆形,柱状图,文字请点这里

    相关文章

      网友评论

        本文标题:ios Quartz2D使用(画一些简单的图形)(1)

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