首页 > 代码库 > 学习笔记-quartz2D

学习笔记-quartz2D

一、简介                                                                           

  quartz2D是属于core Graphic框架,该框架是基于C的API。quartz2D用于绘制平面图形。

二、例程步骤                                                 

  1. 添加UIView的子类MyView,在MyView.m中实现如下方法:
    1 #pragma mark 在这个方法内部进行绘图2 - (void)drawRect:(CGRect)rect {3 4 }

      
  2. 在该方法内部绘图;
  3. 在control.m中新建MyView的对象并添加到self.view中;

三、绘图功能                                                

  1.  1 #pragma mark 画线 2 void drawLine() { 3     // 取得当前的图形上下文 4     CGContextRef context = UIGraphicsGetCurrentContext(); 5      6     // 构建一个路径 7     CGContextBeginPath(context); 8      9     // 先设置一个起点10     CGContextMoveToPoint(context, 50, 50);11     12     // 从(50,50)连线到(100,100)13     CGContextAddLineToPoint(context, 100, 100);14     15     // 从(100,100)连线到(150,50)16     CGContextAddLineToPoint(context, 150, 50);17     18     // 从(150,50)连线到(150,50)19     CGContextAddLineToPoint(context, 200, 100);20     21     22     // 设置线条颜色(红色)23     // #ffff000024     CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);25     26     // 同时设置stroke和fill的颜色27     // [[UIColor blueColor] set];28     29     // 会覆盖前面设置的颜色30     [[UIColor blueColor] setStroke];31     32     // 设置线宽33     CGContextSetLineWidth(context, 20);34     35     //kCGLineCapButt,36     //kCGLineCapRound,37     //kCGLineCapSquare38     // 设置线条 头部 和 尾部的样式39     CGContextSetLineCap(context, kCGLineCapRound);40     // kCGLineJoinMiter,41     // kCGLineJoinRound,42     // kCGLineJoinBevel43     // 设置线段连接点的样式44     CGContextSetLineJoin(context, kCGLineJoinRound);45     46     [[UIColor redColor] setStroke];47     48     // 先设置一个起点49     CGContextMoveToPoint(context, 50, 100);50     51     // 从(50,50)连线到(100,100)52     CGContextAddLineToPoint(context, 100, 150);53     54     // 从(100,100)连线到(150,50)55     CGContextAddLineToPoint(context, 150, 100);56     57     // 从(150,50)连线到(150,50)58     CGContextAddLineToPoint(context, 200, 150);59     60     61     // 绘制构建好的路径(stroke是空心的意思)62     CGContextStrokePath(context);63 }

     

  2. #pragma mark 画矩形(多边形)void drawShape() {    // 取得当前的图形上下文    CGContextRef context = UIGraphicsGetCurrentContext();        // 构建一个路径(这句可以不写,默认就会构建一个路径)    // CGContextBeginPath(context);        /******空心矩形******/        // 添加一个矩形到路径中    CGRect rect = CGRectMake(40, 100, 100, 100);    CGContextAddRect(context, rect);        // 设置红色的空心颜色    [[UIColor redColor] setStroke];        // 绘制构建好的路径    CGContextStrokePath(context);        /******实心矩形******/    // 设置实心颜色    [[UIColor blueColor] setFill];    // 添加矩形到路径中    CGContextAddRect(context, CGRectMake(100, 250, 80, 80));    // 绘制构建好的路径    CGContextFillPath(context);            /******画三角形******/    // 设置起点    CGContextMoveToPoint(context, 170, 20);    // 连线到下一个点    CGContextAddLineToPoint(context, 250, 50);    // 连线到下一个点    CGContextAddLineToPoint(context, 200, 70);    // 合并路径,将起点和终点连接在一起    CGContextClosePath(context);        // 设置实心颜色为绿色    [[UIColor greenColor] setFill];        // 绘制路径    CGContextFillPath(context); //实心    // CGContextStrokePath(context); // 空心        /***直接画一个空心矩形***/    [[UIColor yellowColor] setStroke];    CGContextStrokeRect(context, CGRectMake(10, 10, 50, 50));    // 直接画一个实心矩形    // CGContextFillRect(<#CGContextRef c#>, <#CGRect rect#>)}

     

  3. #pragma mark 画椭圆void drawCircle() {    // 取得当前的图形上下文    CGContextRef context = UIGraphicsGetCurrentContext();        /***画椭圆***/    // 添加椭圆到路径中    CGContextAddEllipseInRect(context, CGRectMake(10, 10, 100, 50));    // 绘制空心路径    // CGContextStrokePath(context);    // 绘制实心路径    CGContextFillPath(context);        /***直接画椭圆***/    CGContextStrokeEllipseInRect(context, CGRectMake(10, 70, 150, 100));        /***画圆***/    CGContextStrokeEllipseInRect(context, CGRectMake(10, 170, 50, 50));            /**画圆弧**/    // 180 - PI    // 90 - PI/2    // 0 - 0    // NO代表顺时针    // YES代表逆时针    CGContextAddArc(context, 250, 100, 40, 0, M_PI_2, NO);    CGContextFillPath(context);        /*画左半圆*/    CGContextAddArc(context, 250, 200, 40, -M_PI_2, M_PI_2, YES);    CGContextFillPath(context);        /*画复杂圆弧*/    CGContextMoveToPoint(context, 10, 260);    CGContextAddArcToPoint(context, 100, 200, 150, 230, 40);    CGContextStrokePath(context);}

     

  4. #pragma mark 画文字- (void) drawText {    // 取得当前的图形上下文    CGContextRef context = UIGraphicsGetCurrentContext();    [[UIColor redColor] setFill];    CGRect rect = CGRectMake(50, 50, 150, 150);    CGContextFillRect(context, rect);            [[UIColor blueColor] setFill];    NSString *str = @"I am a word!!!I am a word!!!I am a word!!!I am a word!!!I am a word!!!I am a word!!!";        UIFont *font = [UIFont systemFontOfSize:20];    //[str drawAtPoint:CGPointMake(0, 0) withFont:font];        // 限制文字的宽度    CGFloat width = self.bounds.size.width;    // 不允许换行    [str drawAtPoint:CGPointMake(0, 0) forWidth:100 withFont:font lineBreakMode:NSLineBreakByCharWrapping];        // 运行换行    // NSLineBreakByWordWrapping换行的时候会保留一个完整的单词    // NSLineBreakByCharWrapping只会保留一个字符    //[str drawInRect:rect withFont:font lineBreakMode:NSLineBreakByCharWrapping];        [str drawInRect:rect withFont:font lineBreakMode:NSLineBreakByWordWrapping alignment:NSTextAlignmentCenter];}

     

  5. #pragma mark 画图片void drawImage() {    UIImage *image = [UIImage imageNamed:@"lufy.png"];        [image drawAtPoint:CGPointMake(0, 0)];        // 会对图片进行自动拉伸    [image drawInRect:CGRectMake(100, 0, 200, 200)];        // 平铺图片    [image drawAsPatternInRect:CGRectMake(0, 220, 320, 250)];}

     

  6. #pragma mark 整体操作void drawAll() {    CGContextRef context = UIGraphicsGetCurrentContext();        // 缩放    CGContextScaleCTM(context, 0.5, 0.5);    // 平移    CGContextTranslateCTM(context, 100, 0);    // 旋转    CGContextRotateCTM(context, -45);        drawShape();}