【iOS】Quartz2D基本图形

一、画线段

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

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

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

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

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

     // 3.渲染显示到view上面（渲染一次）
     CGContextStrokePath(ctx);

     //------------------------

     /**  第2根线段（蓝色）  **/
     // 设置颜色
     CGContextSetRGBStrokeColor(ctx, , , , );
     // 设置一个起点
     CGContextMoveToPoint(ctx, , );
     // 添加一条线段到(150, 40)
     CGContextAddLineToPoint(ctx, , );
     CGContextAddLineToPoint(ctx, , );

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

运行效果：

二、画四边形和三角形

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

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

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

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

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

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

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

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

    //
    CGContextSetRGBStrokeColor(ctx, , , , );

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

运行效果：

　　　　      　　　　

三、画圆、圆弧、扇形

　　圆：一个圆圈

圆弧：弧形，非封闭图形。

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

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

     // 2.画1/4圆
     CGContextMoveToPoint(ctx, , );
     CGContextAddLineToPoint(ctx, , );
     CGContextAddArc(ctx, , , , -M_PI_2, M_PI, );
     CGContextClosePath(ctx);

     [[UIColor redColor] set];

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

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

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

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

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

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

     CGContextSetLineWidth(ctx, );

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

　　　　

四、文字、图片

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

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

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

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

 /**
  *  画文字
  */
 void drawText()
 {
     // 1.获得上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();
     // 2.画矩形
     CGRect cubeRect = CGRectMake(, , , );
     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:];
     [str drawInRect:cubeRect withAttributes:attrs];
 }

运行效果：