iOS绘图教程

转自：http://www.maxiaoguo.com/clothes/252.html

基本图形的绘制 包括： 代码画线，画文字 图片 裁剪 重绘  简单动画

当自定义view的时候 系统会自动调用drawRect 方法

画线

 - (void)drawRect:(CGRect)rect
 {
     // Drawing code
     // 1.获得图形上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2.拼接图形(路径)
     // 设置线段宽度
     CGContextSetLineWidth(ctx, 10);

     // 设置线段头尾部的样式
     CGContextSetLineCap(ctx, kCGLineCapRound);

     // 设置线段转折点的样式
     CGContextSetLineJoin(ctx, kCGLineJoinRound);

     /**  第1根线段  **/
     // 设置颜色
     CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
     // 设置一个起点
     CGContextMoveToPoint(ctx, 10, 10);
     // 添加一条线段到(100, 100)
     CGContextAddLineToPoint(ctx, 100, 100);

     // 渲染一次
     CGContextStrokePath(ctx);


     /**  第2根线段  **/
     // 设置颜色
     CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);
     // 设置一个起点
     CGContextMoveToPoint(ctx, 200, 190);
     // 添加一条线段到(150, 40)
     CGContextAddLineToPoint(ctx, 150, 40);
     CGContextAddLineToPoint(ctx, 120, 60);


     // 3.渲染显示到view上面
     CGContextStrokePath(ctx);
 }

画圆弧

 /**
  *  画圆弧
  */
 void drawArc()
 {
     // 1.获得上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2.画圆弧
     // x\y : 圆心
     // radius : 半径
     // startAngle : 开始角度
     // endAngle : 结束角度
     // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
     CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);


     // 3.显示所绘制的东西
     CGContextFillPath(ctx);
 }

画圆

 /**
  *  画圆
  */
 void drawCircle()
 {
     // 1.获得上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2.画圆
     CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));

     CGContextSetLineWidth(ctx, 10);

     // 3.显示所绘制的东西
     CGContextStrokePath(ctx);
 }

画矩形

 /**
  *  画四边形
  */
 void draw4Rect()
 {
     // 1.获得上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2.画矩形
     CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));

     // set : 同时设置为实心和空心颜色
     // setStroke : 设置空心颜色
     // setFill : 设置实心颜色
     [[UIColor whiteColor] set];

 //    CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);

     // 3.绘制图形
     CGContextFillPath(ctx);
 }

画三角形

 /**
  *  画三角形
  */
 void drawTriangle()
 {
     // 1.获得上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2.画三角形
     CGContextMoveToPoint(ctx, 0, 0);
     CGContextAddLineToPoint(ctx, 100, 100);
     CGContextAddLineToPoint(ctx, 150, 80);
     // 关闭路径(连接起点和最后一个点)
     CGContextClosePath(ctx);

     //
     CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);

     // 3.绘制图形
     CGContextStrokePath(ctx);
 }

 画文字

 /**
  *  画文字
  */
 void drawText()
 {
     // 1.获得上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();
     // 2.画矩形
     CGRect cubeRect = CGRectMake(50, 50, 100, 100);
     CGContextAddRect(ctx, cubeRect);
     // 3.显示所绘制的东西
     CGContextFillPath(ctx);



     // 4.画文字
     NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";
     //    [str drawAtPoint:CGPointZero withAttributes:nil];

     NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
     // NSForegroundColorAttributeName : 文字颜色
     // NSFontAttributeName : 字体
     attrs[NSForegroundColorAttributeName] = [UIColor redColor];
     attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];
     [str drawInRect:cubeRect withAttributes:attrs];
 }

画图片

 void drawImage()
 {
     // 1.取得图片
     UIImage *image = [UIImage imageNamed:@"me"];

     // 2.画
 //    [image drawAtPoint:CGPointMake(50, 50)];
 //    [image drawInRect:CGRectMake(0, 0, 150, 150)];
     [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];

     // 3.画文字
     NSString *str = @"为xxx所画";
     [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];
 }

在绘制的时候 当设置了ctx 的颜色的时候 再绘制其他的图时，颜色需要重置，很麻烦，解决方法是重置 ctx 如下

 // 将ctx拷贝一份放到栈中
    CGContextSaveGState(ctx);

    // 设置绘图状态
    CGContextSetLineWidth(ctx, 10);
    [[UIColor redColor] set];
    CGContextSetLineCap(ctx, kCGLineCapRound);

    // 第1根线
    CGContextMoveToPoint(ctx, 50, 50);
    CGContextAddLineToPoint(ctx, 120, 190);

    CGContextStrokePath(ctx);

    // 将栈顶的上下文出栈,替换当前的上下文
    CGContextRestoreGState(ctx);

整个ctx 的旋转 移动 

 CGContextRotateCTM(ctx, M_PI_4 * 0.3);
 CGContextScaleCTM(ctx, 0.5, 0.5);
 CGContextTranslateCTM(ctx, 0, 150);

图片的裁剪 思路是 裁剪ctx的显示区域

 - (void)drawRect:(CGRect)rect
 {
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     CGContextSaveGState(ctx);

     // 0.画圆
     CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));
     // 裁剪
     CGContextClip(ctx);
     CGContextFillPath(ctx);

     // 1.显示图片
     UIImage *image = [UIImage imageNamed:@"me"];
     [image drawAtPoint:CGPointMake(100, 100)];

     CGContextRestoreGState(ctx);

     CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50));
     CGContextFillPath(ctx);
 }

动画

 CADisplayLink 是一个定时器，特点 刷新频率高，  setNeedsDisplay方法起重新绘制的作用

 - (void)awakeFromNib
 {
     CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
     [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

 //    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];
 }

 - (void)drawRect:(CGRect)rect
 {
     self.snowY+=5;

     if (self.snowY >= rect.size.height) {
         self.snowY = -100;
     }

     UIImage *image = [UIImage imageNamed:@"snow.jpg"];
     [image drawAtPoint:CGPointMake(0, self.snowY)];
 }

通过路径画图

 - (void)drawRect:(CGRect)rect
 {
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 1.先创建一个路径
     CGMutablePathRef linePath = CGPathCreateMutable();



     // 2.拼接路径
     CGPathMoveToPoint(linePath, NULL, 0, 0);
     CGPathAddLineToPoint(linePath, NULL, 100, 100);

     // 3.添加路径到上下文
     CGContextAddPath(ctx, linePath);

     CGMutablePathRef circlePath = CGPathCreateMutable();
     CGPathAddArc(circlePath, NULL, 150, 150, 50, 0, M_PI * 2, 0);
     CGContextAddPath(ctx, circlePath);

     // 4.渲染
     CGContextStrokePath(ctx);


     CGPathRelease(linePath);
     CGPathRelease(circlePath);


     CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();
     CGColorSpaceRelease(cs);

 //    CFRelease(linePath);
 //    CFRelease(circlePath);
 //    CFRelease(cs);
 }