drawRect的绘制的使用（绘制文本字符、绘制图片、绘制图形）-CSDN博客

本文介绍了在iOS中如何使用drawRect方法进行绘制，包括绘制文本、图片和各种图形，如直线、曲线、圆弧等。文章详细阐述了绘图的五个步骤，并提供了注意事项，如何时调用drawRect，以及如何正确处理图形上下文。

通过重写UIView的drawRect方法进行绘制使用，如绘制文本字符、绘制图片、绘制图形等。

在iOS中使用drawRect绘图一般分为以下5个步骤：
1、获取绘图上下文
CGContextRef context = UIGraphicsGetCurrentContext();
2、创建并设置路径
3、将路径添加到上下文
如：线宽、线条颜色、填充颜色等
4、设置上下文状态
CGContextAddLines(context, points, 2);
或线
CGContextAddLineToPoint(context, 10.0, 10.0);
或圆
CGContextAddEllipseInRect(context, CGRectZero);
CGContextAddArc(context, 10.0, 10.0, (60.0 * M_PI / 180.0), (120.0 * M_PI / 180.0), 1);
或弧
CGContextAddArcToPoint(context, 10.0, 200.0, 300.0, 200.0, 100.0);
或二次曲线
CGContextAddQuadCurveToPoint(context, 50.0, 80.0, 200.0, 10.0);
或三次曲线
CGContextAddCurveToPoint(context, 250, 280, 250, 400, 280.0, 300.0);
5、绘制路径
CGContextDrawPath(context, kCGPathFillStroke);
或
CGContextStrokePath(context);
6、释放路径
CGPathRelease(path);

注意事项：

1、设置frame的属性，或调用setNeedsDisplay时才会调用drawRect方法。

2、在绘制过程中

（1）针对实际情况获取图形上下文

CGContextRef context = UIGraphicsGetCurrentContext();

（2）有时候，还需要在获取图形上下文之前，设置开始图形上下文；在使用后，设置关闭图形上下文

UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.0); // 开始图形上下文

CGContextRef context = UIGraphicsGetCurrentContext();
// coding...

UIGraphicsEndImageContext(); // 关闭上下文

3、

1、绘制文本

- (void)drawRect:(CGRect)rect
{
    NSString *text = @"devZhang is an iOS developer.iOS开发者 iOS开发者 iOS开发者 iOS开发者 iOS开发者";
    // 文本段落样式
    NSMutableParagraphStyle *textStyle = [[NSMutableParagraphStyle alloc] init];
    textStyle.lineBreakMode = NSLineBreakByWordWrapping; // 结尾部分的内容以……方式省略 ( "...wxyz" ,"abcd..." ,"ab...yz")
    textStyle.alignment = NSTextAlignmentLeft; //（两端对齐的）文本对齐方式：（左，中，右，两端对齐，自然）
    textStyle.lineSpacing = 5; // 字体的行间距
    textStyle.firstLineHeadIndent = 5.0; // 首行缩进
    textStyle.headIndent = 0.0; // 整体缩进(首行除外)
    textStyle.tailIndent = 0.0; //
    textStyle.minimumLineHeight = 20.0; // 最低行高
    textStyle.maximumLineHeight = 20.0; // 最大行高
    textStyle.paragraphSpacing = 15; // 段与段之间的间距
    textStyle.paragraphSpacingBefore = 22.0f; // 段首行空白空间/* Distance between the bottom of the previous paragraph (or the end of its paragraphSpacing, if any) and the top of this paragraph. */
    textStyle.baseWritingDirection = NSWritingDirectionLeftToRight; // 从左到右的书写方向（一共➡️三种）
    textStyle.lineHeightMultiple = 15; /* Natural line height is multiplied by this factor (if positive) before being constrained by minimum and maximum line height. */
    textStyle.hyphenationFactor = 1; //连字属性 在iOS，唯一支持的值分别为0和1
    // 文本属性
    NSMutableDictionary *textAttributes = [[NSMutableDictionary alloc] init];
    // NSParagraphStyleAttributeName 段落样式
    [textAttributes setValue:textStyle forKey:NSParagraphStyleAttributeName];
    // NSFontAttributeName 字体名称和大小
    [textAttributes setValue:[UIFont systemFontOfSize:12.0] forKey:NSFontAttributeName];
    // NSForegroundColorAttributeNam 颜色
    [textAttributes setValue:[UIColor redColor] forKey:NSForegroundColorAttributeName];
    // 绘制文字
    [text drawInRect:rect withAttributes:textAttributes];
}

2、绘制图片

// 绘制图片
- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 保存初始状态
    CGContextSaveGState(context);
    // 图形上下文移动{x,y}
    CGContextTranslateCTM(context, 50.0, 30.0);
    // 图形上下文缩放{x,y}
    CGContextScaleCTM(context, 0.8, 0.8);
    // 旋转
    CGContextRotateCTM(context, M_PI_4 / 4); 
    
    // 绘制图片
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"girl" ofType:@"jpg"];
    UIImage *image = [[UIImage alloc] initWithContentsOfFile:imagePath];
    
    CGRect rectImage = CGRectMake(0.0, 0.0, rect.size.width, (rect.size.width * image.size.height / image.size.width));
    
    // 圆角图片设置
//    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.0); // 开始图形上下文
//    CGContextRef ctx = UIGraphicsGetCurrentContext(); // 获得图形上下文
//    CGRect rectNew = CGRectMake(0, 0, rect.size.width, rect.size.height); // 设置一个范围
//    CGContextAddEllipseInRect(ctx, rect); // 根据一个rect创建一个椭圆
//    CGContextClip(ctx); // 裁剪
//    [image drawInRect:rectNew]; // 将原照片画到图形上下文
//    image = UIGraphicsGetImageFromCurrentImageContext(); // 从上下文上获取剪裁后的照片
//    UIGraphicsEndImageContext(); // 关闭上下文
    
    // 绘制图片
    // 1 图片可能显示不完整
//    [image drawAtPoint:CGPointMake(0, 0)];
    
    // 2 在rect范围内完整显示图片-正常使用
    [image drawInRect:rectImage];
    
    // 3 图片上下颠倒了
//    CGContextRef context = UIGraphicsGetCurrentContext();
//    CGContextDrawImage(context, rectImage, image.CGImage);
    
    // 4 图片上下颠倒了-n个显示
//    CGContextRef context = UIGraphicsGetCurrentContext();
//    CGContextDrawTiledImage(context, rectImage, image.CGImage);
    
    // 恢复到初始状态
    CGContextRestoreGState(context);
}

3、绘制图形

（1）菱形、矩形、正方形

- (void)drawRect:(CGRect)rect
{
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 画一个菱形-实线带边框，带填充
    // 边框
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor magentaColor].CGColor);
    // 方法1 菱形起点-终点
//    CGContextMoveToPoint(context, 10.0, 80.0);
//    CGContextAddLineToPoint(context, 60.0, 10.0);
//    CGContextAddLineToPoint(context, 110.0, 80.0);
//    CGContextAddLineToPoint(context, 60.0, 150.0);
//    CGContextAddLineToPoint(context, 10.0, 80.0);
    // 方法2 菱形起点-终点
    CGPoint points[5] = {CGPointMake(10.0, 80.0), CGPointMake(60.0, 10.0), CGPointMake(110.0, 80.0), CGPointMake(60.0, 150.0), CGPointMake(10.0, 80.0)};
    CGContextAddLines(context, points, 5);
    // 填充
    CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
    // 绘制路径及填充模式
    CGContextDrawPath(context, kCGPathFillStroke);
    
    // 画一个菱形-虚线带边框，无填充
    CGContextSetLineWidth(context, 1.0);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGFloat dashArray[] = {4, 4}; // 表示先画1个点再画4个点（前者小后者大时，虚线点小且间隔大；前者大后者小时，虚线点大且间隔小）
    CGContextSetLineDash(context, 1, dashArray, 2); // 其中的2表示dashArray中的值的个数
    // 菱形起点-终点
    CGPoint pointsStroke[5] = {CGPointMake(120.0, 80.0), CGPointMake(170.0, 10.0), CGPointMake(220.0, 80.0), CGPointMake(170.0, 150.0), CGPointMake(120.0, 80.0)};
    CGContextAddLines(context, pointsStroke, 5);
    // 方法1 绘制路径及填充模式
//    CGContextDrawPath(context, kCGPathStroke);
    // 方法2 绘制路径
    CGContextStrokePath(context);
    
    // 画一个菱形-无边框，带填充
    CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
    // 菱形起点-终点
    CGPoint pointsFill[5] = {CGPointMake(230.0, 80.0), CGPointMake(260.0, 10.0), CGPointMake(290.0, 80.0), CGPointMake(260.0, 150.0), CGPointMake(230.0, 80.0)};
    CGContextAddLines(context, pointsFill, 5);
    // 方法1 绘制路径及填充模式
    CGContextDrawPath(context, kCGPathFill);

    
    // 通过frame的宽高区分正方形，矩形
    // 画一个正方形-带边框，带填充
    // 边框
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    // 正方形起点-终点
    CGPoint pointsRect[5] = {CGPointMake(10.0, 160.0), CGPointMake(60.0, 160.0), CGPointMake(60.0, 210.0), CGPointMake(10.0, 210.0), CGPointMake(10.0, 160.0)};
    CGContextAddLines(context, pointsRect, 5);
    // 填充
    CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
    // 绘制路径及填充模式
    CGContextDrawPath(context, kCGPathFillStroke);
    
    // 画一个正方形-带边框，无填充
    // 边框
    CGContextSetLineWidth(context, 1.0);
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    // 方法1 正方形起点-终点
//    CGPoint pointsRect2[5] = {CGPointMake(70.0, 160.0), CGPointMake(120.0, 160.0), CGPointMake(120.0, 210.0), CGPointMake(70.0, 210.0), CGPointMake(70.0, 160.0)};
//    CGContextAddLines(context, pointsRect2, 5);
    // 方法2
//    CGContextAddRect(context, CGRectMake(70.0, 160.0, 50.0, 50.0));
    // 方法3
    CGContextStrokeRect(context, CGRectMake(70.0, 160.0, 50.0, 50.0));
    // 方法1 绘制路径及填充模式
//    CGContextDrawPath(context, kCGPathStroke);
    // 方法2 绘制路径
    CGContextStrokePath(context);

    
    // 画一个正方形-无边框，带填充
    CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
    // 方法1 填充
//    CGContextFillRect(context, CGRectMake(130.0, 160.0, 50.0, 50.0));
    // 方法2
    CGContextAddRect(context, CGRectMake(130.0, 160.0, 50.0, 50.0));
    CGContextDrawPath(context, kCGPathFill);


    
    
    // 画一个矩形-带边框，带填充
    // 边框
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor brownColor].CGColor);
    // 矩形起点-终点
    CGPoint pointsRectangle[5] = {CGPointMake(10.0, 220.0), CGPointMake(80.0, 220.0), CGPointMake(80.0, 270.0), CGPointMake(10.0, 270.0), CGPointMake(10.0, 220.0)};
    CGContextAddLines(context, pointsRectangle, 5);
    // 填充
    CGContextSetFillColorWithColor(context, [UIColor orangeColor].CGColor);
    // 绘制路径及填充模式
    CGContextDrawPath(context, kCGPathFillStroke);
    
    // 画一个矩形-带边框，无填充
    // 边框
    CGContextSetLineWidth(context, 1.0);
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    // 方法1 正方形起点-终点
//    CGPoint pointsRect2[5] = {CGPointMake(90.0, 220.0), CGPointMake(160.0, 220.0), CGPointMake(160.0, 270.0), CGPointMake(90.0, 270.0), CGPointMake(90.0, 220.0)};
//    CGContextAddLines(context, pointsRect2, 5);
    // 方法2
//    CGContextAddRect(context, CGRectMake(90.0, 220.0, 70.0, 50.0));
    // 方法3
    CGContextStrokeRect(context, CGRectMake(90.0, 220.0, 70.0, 50.0));
    // 方法1 绘制路径及填充模式
//    CGContextDrawPath(context, kCGPathStroke);
    // 方法2 绘制路径
    CGContextStrokePath(context);
    
    
    // 画一个矩形-无边框，带填充
    CGContextSetFillColorWithColor(context, [UIColor purpleColor].CGColor);
    // 方法1 填充
//    CGContextFillRect(context, CGRectMake(170.0, 220.0, 70.0, 50.0));
    // 方法2
    CGContextAddRect(context, CGRectMake(170.0, 220.0, 70.0, 50.0));
    CGContextDrawPath(context, kCGPathFill);
}

（2）圆形、椭圆形、扇形

// 椭圆形，或圆形，扇形
- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 背景颜色设置
    [[UIColor yellowColor] set];
    CGContextFillRect(context, rect);
    
    
    // 设置长宽，区分椭圆或圆
    CGRect rectRing = CGRectMake(10.0, 10.0, (rect.size.width - 10.0 * 2), 100.0);
    
    // 实线椭圆
    CGContextSetLineWidth(context, 1.0);
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    CGContextAddEllipseInRect(context, rectRing);
    CGContextDrawPath(context, kCGPathStroke);
    
    // 虚线椭圆
    rectRing = CGRectMake(10.0, 120.0, (rect.size.width - 10.0 * 2), 100.0);
    CGFloat dashArray[] = {2, 6};
    CGContextSetLineDash(context, 1, dashArray, 2);
    CGContextSetLineWidth(context, 1.0);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextAddEllipseInRect(context, rectRing);
    CGContextDrawPath(context, kCGPathStroke);
    
    // 实线圆-有边框，无填充
    rectRing = CGRectMake(10.0, 230.0, 80.0, 80.0);
    CGContextSetLineWidth(context, 1.0);
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    CGContextAddEllipseInRect(context, rectRing);
    CGContextDrawPath(context, kCGPathStroke);
    
    // 实线圆-有边框，有填充
    // 边框
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    // 填充
    CGContextSetFillColorWithColor(context, [UIColor purpleColor].CGColor);// 填充颜色
    CGContextAddArc(context, 140.0, 270.0, 40.0, 0, 2 * M_PI, 0); // 添加一个圆{x,y}中心点位置
    // kCGPathFill填充非零绕数规则,kCGPathEOFill表示用奇偶规则,kCGPathStroke路径,kCGPathFillStroke路径填充,kCGPathEOFillStroke描线
    CGContextDrawPath(context, kCGPathFillStroke);
    
    // 实线圆-无边框，有填充
    rectRing = CGRectMake(190.0, 230.0, 80.0, 80.0);
    CGContextAddEllipseInRect(context, rectRing);
    [[UIColor orangeColor] set];
    CGContextFillPath(context);
    
    
    
    // 扇形
    // 实线-有边框，有填充
    // 边框
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    CGContextMoveToPoint(context, 50.0, 380.0);
    // 填充
    CGContextSetFillColorWithColor(context, [UIColor purpleColor].CGColor);// 填充颜色
    CGContextAddArc(context, 50.0, 380.0, 60.0, (-60 * M_PI / 180), (-120 * M_PI / 180), 1); // 添加一个圆{x,y}中心点位置
    CGContextClosePath(context);
    // kCGPathFill填充非零绕数规则,kCGPathEOFill表示用奇偶规则,kCGPathStroke路径,kCGPathFillStroke路径填充,kCGPathEOFillStroke描线
    CGContextDrawPath(context, kCGPathFillStroke);
}

（3）实线、虚线

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 画实线 方法1
    // 线条宽
    CGContextSetLineWidth(context, 1.0);
    // 线条颜色
    CGContextSetRGBStrokeColor(context, 1.5, 0.0, 0.0, 1.0); // 方法1
//    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); // 方法2
    // 坐标点数组
    CGPoint aPoints[2];
    aPoints[0] = CGPointMake(10.0, 20.0);
    aPoints[1] = CGPointMake((rect.size.width - 10.0), 20.0);
    // 添加线 points[]坐标数组，和count大小
    CGContextAddLines(context, aPoints, 2);
    // 根据坐标绘制路径
    CGContextDrawPath(context, kCGPathStroke);
    
    
    // 画实线 方法2
    // 线条宽
    CGContextSetLineWidth(context, 5.0);
    // 线条颜色
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    // 起点坐标
    CGContextMoveToPoint(context, 10.0, 40.0);
    // 终点坐标
    CGContextAddLineToPoint(context, (rect.size.width - 10.0), 40.0);
    // 绘制路径
    CGContextStrokePath(context);

    
    // 画虚线
    // 线条宽
    CGContextSetLineWidth(context, 2.0);
    // 线条颜色
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    // 虚线
    CGFloat dashArray[] = {1, 4}; // 表示先画1个点再画4个点（前者小后者大时，虚线点小且间隔大；前者大后者小时，虚线点大且间隔小）
    CGContextSetLineDash(context, 1, dashArray, 2); // 其中的2表示dashArray中的值的个数
    // 起点
    CGContextMoveToPoint(context, 10.0, 60.0);
    // 终点
    CGContextAddLineToPoint(context, (rect.size.width - 10.0), 60.0);
    // 绘制路径
    CGContextStrokePath(context);
}

（4）曲线、弧线

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 绘制贝塞尔曲线
    // 二次曲线
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
    // 起点
    CGContextMoveToPoint(context, 10.0, 10.0);
    // 设置贝塞尔曲线的控制点坐标{cp1x,cp1y} 终点坐标{x,y}
    CGContextAddQuadCurveToPoint(context, (rect.size.width / 2), 80.0, (rect.size.width - 10.0), 10.0);
    // 绘制前设置颜色
    // 方法1-只有边框颜色
//    [[UIColor blueColor] setStroke];
//    CGContextStrokePath(context);
    // 方法2-边框和填充颜色
    [[UIColor blueColor] setStroke];
    [[UIColor yellowColor] setFill];
    CGContextDrawPath(context, kCGPathFillStroke);
    
    
    
    // 三次曲线
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    // 起点
    CGContextMoveToPoint(context, 10.0, 200.0);
    // 设置贝塞尔曲线的控制点坐标{cp1x,cp1y} 控制点坐标{cp2x,cp2y} 终点坐标{x,y}
    CGContextAddCurveToPoint(context, 100.0, 0.0, 200.0, 300.0, (rect.size.width - 10.0), 100.0);
    // 绘制前设置颜色
    // 方法1-只有边框颜色
//    [[UIColor blueColor] setStroke];
//    CGContextStrokePath(context);
    // 方法2-边框和填充颜色
    [[UIColor greenColor] setStroke];
    [[UIColor yellowColor] setFill];
    CGContextDrawPath(context, kCGPathFillStroke);
}

（5）渐变背景颜色

// 渐变
- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextClip(context);
    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
    CGFloat colors[] = {
        204.0 / 255.0, 224.0 / 255.0, 244.0 / 255.0, 1.00,
        29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00,
        0.0 / 255.0,  50.0 / 255.0, 126.0 / 255.0, 1.00,
    };
    CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors) / (sizeof(colors[0]) * 4));
    CGColorSpaceRelease(rgb);
    CGContextDrawLinearGradient(context, gradient, CGPointMake(0.0,0.0), CGPointMake(0.0, rect.size.height),
    kCGGradientDrawsBeforeStartLocation);
}