IOS 图形绘制

// 定义COLOR1 常量
// 后面代码COLOR1, COLOR2 都是指本处的常量
#define COLOR1 [UIColor colorWithRed:1.0 green:0.2 blue:0.31 alpha:1.0]
#define COLOR2 [UIColor colorWithRed:0.5 green:0.2 blue:0.51 alpha:1.0]

绘制直线

// drawRect 可以通过实例化执行setNeedsDisplay方法手动触发调用
// drawRect 方法在类进行实例化时候都会调用，可以不适用setNeedsDisplay方法手动调用

- (void)drawRect:(CGRect)rect {
  // 获取当前的图形上下文
  CGContextRef context = UIGraphicsGetCurrentContext();

  // 设置绘制的颜色
  [COLOR1 setStroke];

  // 设置线条的宽度
  CGContextSetLineWidth(context, 2.0);

  // 设置线条绘制的起始点
  CGContextMoveToPoint(context, 100, 200);

  // 添加线条路径
  CGContextAddLineToPoint(context, 100, 300);

  // 执行绘制路径操作
  CGContextStrokePath(context);

}

矩形绘制

//
// setFill  方法表示矩形内部填充的颜色， 通过CGContextDrawPath完成   
- (void) drawCustomRect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    [COLOR2 setFill];
    CGContextSetLineWidth(context, 2.0);

    // 添加矩形坐标和长宽
    CGContextAddRect(context, CGRectMake(100, 400, 100, 200));
    // CGContextStrokePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
}

三角形绘制

CGContextRef context = UIGraphicsGetCurrentContext();
[COLOR2 setFill];
CGContextSetLineWidth(context, 2.0);
// 创建一个可变路径
CGMutablePathRef pathRef = CGPathCreateMutable();
// 添加三个绘制坐标
CGPathMoveToPoint(pathRef, nil, 100, 200);
CGPathAddLineToPoint(pathRef, nil, 200, 300);
CGPathAddLineToPoint(pathRef, nil, 0, 30);
// 将路径添加到上下文
CGContextAddPath(context, pathRef);
//    CGContextStrokePath(context);
// 执行图形的绘制
CGContextDrawPath(context, kCGPathFillStroke);

任意弧形绘制

CGContextRef context = UIGraphicsGetCurrentContext();
[COLOR2 setFill];
CGContextSetLineWidth(context, 2.0);
// 创建一个可变路径
CGMutablePathRef pathRef = CGPathCreateMutable();
// 添加三个绘制坐标
CGPathMoveToPoint(pathRef, nil, 100, 200);
CGContextAddCurveToPath(context, 200, 100, 200, 300, 300, 200);
CGContextAddPath(context, pathRef);
//    CGContextStrokePath(context);
// 执行图形的绘制
CGContextDrawPath(context, kCGPathFillStroke);

圆形绘制

CGContextRef context = UIGraphicsGetCurrentContext();
[COLOR1 setFill];
CGContextSetLineWidth(context, 2.0);

// 绘制圆形使用的方法：
// 
// CGContextAddArc(<#CGContextRef  _Nullable c#>, <#CGFloat x#>, <#CGFloat y#>, 
// <#CGFloat radius#>, <#CGFloat startAngle#>, <#CGFloat endAngle#>, <#int clockwise#>)
// x, y: 表示圆心的位置
// radius: 表示圆的半径长度
// startAngle: 起始的弧度(0-M_PI*2)
// endangle: 结束的弧度
// clockwise: 绘制的方向，0表示顺时针，1表示逆时针
//
// 绘制半圆只需要将弧度改为M_PI即可
// 通过CGContextClosePath(content); 将半圆闭合

CGContextAddArc(context, 200, 200, 150, 0, M_PI*2, 0);
CGContextAddPath(context, pathRef);
CGContextDrawPath(context, kCGPathFillStroke);

绘制的属性

// CGContextSetLineCap(context, KCGLineCapRound);
// 设置线条的两端的形状，KCGLineCapRound表示两端线条以弧度的形式绘制
//
// CGContextSetLineJoin(context, KCGLineJoinRound);
// 设置两个线条连接转折处的尖锐程度，KCGLineJoinRound表示线条以弧度方式转弯
// 

- (void) drawRect:(CGRect) rect {
  CGContextRef context = UIGraphicsGetCurrentContext();
  [COLOR1 setStroke];
  CGContextSetLineWidth(context, 2.0);
  CGContextSetLineCap(context, KCGLineCapRound);
  CGContextSetLineJoin(context, KCGLineJoinRound);
  CGContextMoveToPoint(context, 100, 200);
  CGContextAddLineToPoint(context, 100, 300);
  CGContextStrokePath(context);
}

虚线的绘制

//
//

- (void) drawRect:(CGRect) rect {
  CGContextRef context = UIGraphicsGetCurrentContext();
  [COLOR1 setStroke];
  CGContextSetLineWidth(context, 2.0);
  CGFloat length[] = {10, 30, 10};

  // 第一个参数：context上下文
  // 第二个参数：绘制虚线的起始点
  // 第三个参数：数组的名称
  // 第四个参数：数组的长度
  CGContextSetLineDash(context, 0, length, 3);
  CGContextMoveToPoint(context, 100, 200);
  CGContextAddLineToPoint(context, 100, 300);
  CGContextStrokePath(context);
}

UIView drawRect方法的调用条件

1. 单纯调用init方法不会触发drawRect方法的执行
2. 通过设置frame，可以触发drawRect方法的执行，比如initWithFrame方法初始化会自动触发drawRect执行
3. 调用setNeedsDisplay方法会触发drawRect方法的执行（可以用来动态刷新界面的显示效果）

图片的绘制

//   
// 通过drawRect方法来绘制图片
UIImage *image = [UIImage imageNamed:@"1.png"];

// 在指定坐标点绘制图片
[image drawAtPoint:CGPointMake(100, 100)];

// 在指定坐标点矩形内绘制图片，图片会拉伸
[image drawInRect:CGRectMake(100, 100, 300, 600)];

// 在指定位置矩形内填充图片，将通过纹理的方式填充多张图片
[image drawAsPatternInRect:CGRectMake(100, 100, 300, 600)];

图片的裁剪

// 
// AddEllipse 在指定位置以及宽高添加一个椭圆裁剪区域， 如果宽高一致，表示一个圆形
// CGContextClip 执行裁剪操作
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextAddEllipseInRect(context, CGRectMake(150, 150, 60, 60));
CGContextClip(context);
CGContextFillPath(context);
UIImage *img = [UIImage imageNamed:@"1.png"];
[img drawAtPoint:CGPointMake(150, 150)];
CGContextFillPath(context);
CGContextRestoreGState(context);

文字Logo的绘制

//   
//

NSString *str = @"hello world.";
// UIImage *img = [UIImage imageNamed:@"1.png"];
// [img drawAtPoint:CGPointMake(100, 100)];

// 自定义文字log属性， 设置文字大小以及文字截断的风格和颜色
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];
paragraphStyle.lineBreakMode = NSLineBreakByClipping;

NSDictionary *dic = @{NSFontAttributeName:[UIFont systemFontOfSize:10.0],
                     NSParagraphStyleAttributeName:paragraphStyle,
                      NSForgroundColorAttributeName:[UIColor greenColor]};
// 执行字符串的绘制
[str drawInRect:CGRectMake(100, 100, 100, 10) withAttributes:dic];