iOS开发iOS 开发 iOS学习笔记

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

2016-04-26  本文已影响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);

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

上一篇下一篇

猜你喜欢

热点阅读