首页 > 代码库 > 【iOS】Quartz2D基本图形

【iOS】Quartz2D基本图形

 

一、画线段

技术分享
 1 - (void)drawRect:(CGRect)rect 2 { 3     // Drawing code 4     // 1.获得图形上下文 5     CGContextRef ctx = UIGraphicsGetCurrentContext(); 6      7     // 2.拼接图形(路径) 8     // 设置线段宽度 9     CGContextSetLineWidth(ctx, 10);10     11     // 设置线段头尾部的样式12     CGContextSetLineCap(ctx, kCGLineCapRound);13     14     // 设置线段转折点的样式15     CGContextSetLineJoin(ctx, kCGLineJoinRound);16     17     18     /**  第1根线段(红色) **/19     // 设置颜色20     CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);21     // 设置一个起点22     CGContextMoveToPoint(ctx, 10, 10);23     // 添加一条线段到(100, 100)24     CGContextAddLineToPoint(ctx, 100, 100);25     26     // 3.渲染显示到view上面(渲染一次)27     CGContextStrokePath(ctx);28     29     //------------------------30     31     /**  第2根线段(蓝色)  **/32     // 设置颜色33     CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);34     // 设置一个起点35     CGContextMoveToPoint(ctx, 200, 190);36     // 添加一条线段到(150, 40)37     CGContextAddLineToPoint(ctx, 150, 40);38     CGContextAddLineToPoint(ctx, 120, 60);39     40     41     // 3.渲染显示到view上面42     CGContextStrokePath(ctx);43 }
View Code

运行效果:

                  技术分享

 

二、画四边形和三角形

      画四边形和三角形,就是利用线段将其连接起来。代码如下:

技术分享
/** *  画四边形 */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);}
View Code

运行效果:

    技术分享          技术分享

 

三、画圆、圆弧、扇形

  圆:一个圆圈

      圆弧:弧形,非封闭图形。

  扇形:比如四分之一圆,利用直线与圆弧组成。

技术分享
 1 - (void)drawRect:(CGRect)rect 2 { 3     // 1.获得上下文 4     CGContextRef ctx = UIGraphicsGetCurrentContext(); 5      6     // 2.画1/4圆 7     CGContextMoveToPoint(ctx, 100, 100); 8     CGContextAddLineToPoint(ctx, 100, 150); 9     CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);10     CGContextClosePath(ctx);11     12     [[UIColor redColor] set];13     14     // 3.显示所绘制的东西15     CGContextFillPath(ctx);16 }17 18 /**19  *  画圆弧20  */21 void drawArc()22 {23     // 1.获得上下文24     CGContextRef ctx = UIGraphicsGetCurrentContext();25     26     // 2.画圆弧27     // x\y : 圆心28     // radius : 半径29     // startAngle : 开始角度30     // endAngle : 结束角度31     // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)32     CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);33     34     35     // 3.显示所绘制的东西36     CGContextFillPath(ctx);37 }38 39 /**40  *  画圆41  */42 void drawCircle()43 {44     // 1.获得上下文45     CGContextRef ctx = UIGraphicsGetCurrentContext();46     47     // 2.画圆48     CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));49     50     CGContextSetLineWidth(ctx, 10);51     52     // 3.显示所绘制的东西53     CGContextStrokePath(ctx);54 }
View Code

    技术分享

 

四、文字、图片

    就是将文文字与图片划到view上。

技术分享
 1 void drawImage() 2 { 3     // 1.取得图片 4     UIImage *image = [UIImage imageNamed:@"me"]; 5      6     // 2.画 7 //    [image drawAtPoint:CGPointMake(50, 50)]; 8 //    [image drawInRect:CGRectMake(0, 0, 150, 150)]; 9     [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];10     11     // 3.画文字12     NSString *str = @"为xxx所画";13     [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];14 }15 16 /**17  *  画文字18  */19 void drawText()20 {21     // 1.获得上下文22     CGContextRef ctx = UIGraphicsGetCurrentContext();23     // 2.画矩形24     CGRect cubeRect = CGRectMake(50, 50, 100, 100);25     CGContextAddRect(ctx, cubeRect);26     // 3.显示所绘制的东西27     CGContextFillPath(ctx);28     29     30     31     // 4.画文字32     NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";33     //    [str drawAtPoint:CGPointZero withAttributes:nil];34     35     NSMutableDictionary *attrs = [NSMutableDictionary dictionary];36     // NSForegroundColorAttributeName : 文字颜色37     // NSFontAttributeName : 字体38     attrs[NSForegroundColorAttributeName] = [UIColor redColor];39     attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];40     [str drawInRect:cubeRect withAttributes:attrs];41 }
View Code

运行效果:

    技术分享     技术分享

【iOS】Quartz2D基本图形