Quartz2D绘图

标签: 裁剪、多边形、绘制图片、绘制文字、截图、曲线、扇形、椭圆、直线

绘图基本格式

- (void)drawRect:(CGRect)rect{

// 只有在drawRect中才能获得跟View相关联的图形上下文,系统会在视图将要显示时自动调用这个方法;
// 获取绘图上下文,在drawRect方法中获取的是layer的上下文。
    CGContextRef ctx = UIGraphicsGetCurrentContext();

// Fill ——> 填充
// Stroke ——> 空心
}

一、绘制直线(虚线为多条直线的集合)

// 方法一   
 // 1.获取绘图上下文,在drawRect方法中获取的是layer的上下文。    
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.拼接路径    
CGMutablePathRef path = CGPathCreateMutable();    
// 3.设置起始点(注意NULL只能手动输入大写,不会提示)    
CGPathMoveToPoint(path, NULL, 50, 50);    
// 4.添加结束点    
CGPathAddLineToPoint(path, NULL, 80, 50);    
// 5.添加路径到上下文    
CGContextAddPath(ctx, path);    
// 6.进行渲染显示    
CGContextStrokePath(ctx);       

// 方法二:系统自动创建路径    
CGContextRef ctx2 = UIGraphicsGetCurrentContext();    
CGContextMoveToPoint(ctx2, 40, 40);    
CGContextAddLineToPoint(ctx2, 80, 40);    
CGContextStrokePath(ctx2);      

// 方法三:纯UI框架    
// 4.内部自动获得上下文,用UI框架画图    
UIBezierPath *path1 = [UIBezierPath bezierPath];    
[path1 moveToPoint:CGPointMake(60, 60)];    
[path1 addLineToPoint:CGPointMake(70, 70)];    
[path1 stroke];       

// 方法四:UI框架与CG框架结合    
  CGContextRef ctx3 = UIGraphicsGetCurrentContext();    
  UIBezierPath *path2 = [UIBezierPath bezierPath];    
  [path2 moveToPoint:CGPointMake(60, 80)];    
  [path2 addLineToPoint:CGPointMake(70, 80)];    
  CGContextAddPath(ctx3, [path2 CGPath]); 
// UIKit 转到CG框架    
  CGContextStrokePath(ctx3);

二、绘制曲线

    // 获取图形上下文
    CGContextRef ctx4 = UIGraphicsGetCurrentContext();
    // 画曲线(设置起点)
    CGContextMoveToPoint(ctx4, 20, 100);

   // 设置控制点和终点
    // 三次曲线函数
    //    CGContextAddCurveToPoint(ctx4, 50, 80, 50 , 80, 100, 100);
    // 二次曲线函数
    CGContextAddQuadCurveToPoint(ctx4, 50, 150, 100, 100);
    CGContextStrokePath(ctx4);

三、绘制多边形

// 常规画法
CGContextRef ctx = UIGraphicsGetCurrentContext();    
 // 起始点   
CGContextMoveToPoint(ctx, 30, 30);
// 终点   
CGContextAddLineToPoint(ctx, 60, 60);   
 // 第二条线的终点    
CGContextAddLineToPoint(ctx, 70, 20);
// 设置设置RGB颜色     
CGContextSetRGBStrokeColor(ctx, 1.0, 1.0, 0.7, 1.0); 
// 设置线宽 
CGContextSetLineWidth(ctx, 12);    
 // 设置线条头尾->圆角   
CGContextSetLineCap(ctx, kCGLineCapRound);
 // 设置线条转角->圆角    
 CGContextSetLineJoin(ctx, kCGLineJoinRound);
// 绘制一条空心的线
CGContextStrokePath(ctx);

// 绘制矩形
CGContextRef ctx1 = UIGraphicsGetCurrentContext();    
CGContextAddRect(ctx1, CGRectMake(130, 20, 50, 120));    
[[UIColor grayColor] setFill]; 
// 设置实心颜色    
[[UIColor redColor] setStroke]; 
// 设置空心颜色;    
[[UIColor blueColor] setFill];
// 渲染
CGContextFillPath(ctx1);

// 画一个圆角矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 140) cornerRadius:15];

四、绘制扇形、圆弧

// 获取图形上下文
    CGContextRef ctx4 = UIGraphicsGetCurrentContext();
// 画扇形    
 // 设置圆心及圆弧起始终止弧度,顺时针逆时针;    
CGContextAddArc(ctx4, 20, 20, 50, 0, M_PI_2, 0);
// 绘制弧形终点到圆心的线   
CGContextAddLineToPoint(ctx4, 20, 20); 
// 渲染会自动闭合图形    
CGContextFillPath(ctx4); 

五、绘制椭圆

CGContextRef ctx2 = UIGraphicsGetCurrentContext();
CGContextFillEllipseInRect(ctx2, CGRectMake(130, 20, 50, 120));
CGContextFillPath(ctx2);

或者
CGContextAddEllipseInRect(ctx2, CGRectMake(130, 20, 50, 120));

六、绘制文字

// 绘制文字用OC方法,用C非常非常的麻烦    
    NSString *str = @"你好";
// OC方法中自动获取了上下文,也自动封装了渲染    
    NSMutableDictionary *dict = [NSMutableDictionary dictionary]; 
// 创建一个带有字符属性的字典    
    dict[NSBackgroundColorAttributeName] = [UIColor redColor];

// 将文字指定到点,不换行
    [str drawAtPoint:CGPointMake(130, 130) withAttributes:dict];
 // 将文字指定到矩形中,会自动换行。
    // [str drawInRect:CGRectMake(50, 50, 20, 100) withAttributes:dict];

    //会自动渲染

七、绘制图片

    UIImage *img = [UIImage imageNamed:@"1"];
 // 指定到点,图片有多大,显示多大    
    [img drawAtPoint:CGPointMake(10, 10)];
// 指定到范围,图片会拉伸,以完全显示    
    [img drawInRect:CGRectMake(20, 20, 100, 100)]; 
// 平铺原有图片,n个图片拼接而成,可以用来做背景,实现很小的图片填充满整个背景
    [img drawAsPatternInRect:CGRectMake(20, 20, 100, 100)];
// 图形上下文栈(保存最纯洁图形上下文)

    // 保存最纯洁的图形上下文到栈顶
    CGContextSaveGState(ctx);

    // 取出保存的纯洁的图形上下文,并且覆盖当前上下文
    CGContextRestoreGState(ctx);

八、矩阵操作

    // 一定要在添加路径之前调用
 // 平移 
    CGContextTranslateCTM(ctx2, 20, 30);
// 缩放
   CGContextScaleCTM(ctx2, 1.2, 1.2); 
 // 旋转图片裁剪
 CGContextRotateCTM(ctx2, M_PI_2);

九、定时器及重绘

    // 简易定时器,时间不精确,在0.1s以上,触发时间不规则
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];

    // 每次屏幕刷新都会调用,每秒刷新60次,setNeedsDisplay调用这个方法,并不会立即刷新,而是底层会给这个View加一个重绘的标记,在下一次屏幕刷新的时候自动生成上下文,进行重绘(执行drawRect方法);
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

十、裁剪

     // 设置裁剪区域
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:imageRect];
    // 添加裁剪区域
    [clipPath addClip];   

     // 先进行裁剪,裁剪只会影响到后面绘制的东西
    UIRectClip(CGRectMake(30, 30, 70, 80));

 // 按照rect裁剪图片
       // 将一张大图进行裁切,以设置按钮上的图片        
        CGRect rect = CGRectMake(i *clipW, 0, clipW, clipH);
        CGImageRef img = CGImageCreateWithImageInRect(bigImage.CGImage, rect);
        CGImageRef imgSel = CGImageCreateWithImageInRect(bigSelImage.CGImage, rect);
       // 设置按钮的图片
        btn.contentMode = UIViewContentModeCenter;
        [btn setImage:[UIImage imageWithCGImage:img] forState:UIControlStateNormal];
        [btn setImage:[UIImage imageWithCGImage:imgSel] forState:UIControlStateSelected];

十一、截图

    // 开启图形上下文(no 代表透明,不透明度为0)
    // 如果要求上下文和截图尺寸一样大,那就可以用不透明NO。
 UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, 0);
    // 获取图层上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 渲染 (位图的渲染用renderINContext,将图层渲染到图形上下文,layer只能渲染,不能重绘)
    [view.layer renderInContext:ctx];
    // 获取图片(从当前图形上下文获取图片)
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

    // 关闭图形上下文
    UIGraphicsEndImageContext();
    // 图片保存,做图片的压缩,直接设置图片质量最小
    // UIImageJPEGRepresentation:

    NSData *data = UIImagePNGRepresentation(image);
    // atomically 原子性,如果是YES,那么存储就有缓存,不会有存一半的现象
    [data writeToFile:@"/Users/apple/Desktop/1.png" atomically:YES];

你可能感兴趣的:(Quartz2D绘图)